Question

我只是想问下列内容：

为什么表在不同的浏览器中表现得很奇怪？这种行为与其他标签相同吗？即使是我的数据，虽然重复居中并没有显示它应该的方式。我使用的方式有问题＆＃39; test-align＆＃39;？（我还没有发现与其他标签有任何差异）
当我尝试输入一个＆＃39; id＆＃39; <td element>中的属性为什么它看起来像块元素？
如何更改onMOuseOut以便在我的鼠标从显示的选项中退出之前它不会关闭？

＆＃13;

body {
margin:0px;
padding:0px
}

#header {
height:150px;
background-color:green;
margin:10px;
}

#navbar {
height:60px;
background-color:teal;
text-align:center;
margin:10px;
padding:0px;
}


#hlink1{
background-color:lime;
text-align:center;
height:40px;
padding:3px;
margin-left:0px;
margin-right:0px;
margin-top:5px;
margin-bottom:5px;
}

#hlink2{
background-color:lime;
text-align:center;
height:40px;
padding:3px;
margin-left:0px;
margin-right:0px;
margin-top:5px;
margin-bottom:5px;
}

#hlink3{
background-color:lime;
text-align:center;
height:40px;
padding:3px;
margin-left:0px;
margin-right:0px;
margin-top:5px;
margin-bottom:5px;
}

#hlink1:hover{
background-color:aqua;
text-align:center;
}

#hlink2:hover{
background-color:aqua;
text-align:center;
}

#hlink3:hover{
background-color:aqua;
text-align:center;
}


table {
width:100%;
border-collapse: collapse;
text-align:center;
}

#data3 {
background-color:lime;
padding:5px;
height:0px;
display:none;
}

#data2 {
background-color:lime;
padding:5px;
text-align:center;
height:0px;
display:none;
}

#data1 {
background-color:lime;
padding:5px;
text-align:center;
height:0px;
display:none;
}

.inn:hover{
background-color:aqua;
}

＆＃13;

<html>
<head>
<title>Experiment</title>
<link rel="stylesheet" type="text/css" href="nav.css" />
</head>
<body>

<div id="header">
</div>

<div id="navbar">
<table>
	<th onMouseOver="document.getElementById('data1').style.display='inline';" onMouseOut="document.getElementById('data1').style.display='none';">
	<div id="hlink1">Heading_Link1</div>
	</th>
	<th onMouseOver="document.getElementById('data2').style.display='inline';" onMouseOut="document.getElementById('data2').style.display='none';">
	<div id="hlink2">Heading_Link2</div>
	</th>
	<th onMouseOver="document.getElementById('data3').style.display='inline';" onMouseOut="document.getElementById('data3').style.display='none';">
	<div id="hlink3">Heading_link3</div>
	</th>
	<tr>
		<td colspan="1">
		<table  id="data1">
			<tr><td class="inn">data</td></tr>
			<tr><td class="inn">data</td></tr>
			<tr><td class="inn">data</td></tr>
			<tr><td class="inn">data</td></tr>
		</table>
		</td>
	
		<td>
		<table  id="data2">
			<tr><td class="inn">data</td></tr>
			<tr><td class="inn">data</td></tr>
			<tr><td class="inn">data</td></tr>
			<tr><td class="inn">data</td></tr>
		</table>
		</td>

	
		<td>
		<table  id="data3">
			<tr><td class="inn">data</td></tr>
			<tr><td class="inn">data</td></tr>
			<tr><td class="inn">data</td></tr>
			<tr><td class="inn">data</td></tr>
		</table>
		</td>
	</tr>
	</table>
</div>
</body>
</html>

＆＃13;

Answer 1

您不应尝试更改表的display值，也不要更改其中结构的显示值。虽然从技术上讲不是错误，但相当于将tr放入span;浏览器显然处理不同。
现在，如果您将鼠标悬停事件更改为

document.getElementById('data1').style.display='table';

它们在所有浏览器中的行为都相同。

对于第3点，可能需要稍微改变结构。目前，数据表与悬停行位于不同的行中，因此它们不会相互影响。如果您将这些数据表直接放在标题单元格中，那么悬停就容易得多;你甚至不需要JavaScript活动。

<th>
  <div id="hlink1">Heading_Link1</div>
  <table  id="data1">
    <tr><td class="inn">data</td></tr>
    <tr><td class="inn">data</td></tr>
    <tr><td class="inn">data</td></tr>
    <tr><td class="inn">data</td></tr>
  </table>
</th>

CSS：

#navbar th:hover table {
  display:table
}

无需在每个标题单元格中拼出所有onmouseover操作！

＆＃13;

body {
  margin:0px;
  padding:0px
}

#header {
  height:150px;
  background-color:green;
  margin:10px;
}

#navbar {
  height:60px;
  background-color:teal;
  text-align:center;
  margin:10px;
  padding:0px;
}


#hlink1, #hlink2, #hlink3 {
  background-color:lime;
  text-align:center;
  height:40px;
  padding:3px;
  margin-left:0px;
  margin-right:0px;
  margin-top:5px;
  margin-bottom:5px;
}

#hlink1:hover, #hlink2:hover, #hlink3:hover{
  background-color:aqua;
}

table {
  width:100%;
  border-collapse: collapse;
  text-align:center;
}

#data1, #data2, #data3 {
  background-color:lime;
  padding:5px;
  display:none;
}

.inn:hover{
  background-color:aqua;
}

#navbar th {
  vertical-align:top;
}

#navbar th:hover table {
  display:table
}

＆＃13;

<html>
  <head>
    <title>Experiment</title>
    <link rel="stylesheet" type="text/css" href="nav.css" />
  </head>
  <body>

    <div id="header">
    </div>

    <div id="navbar">
      <table>
        <th>
          <div id="hlink1">Heading_Link1</div>
          <table  id="data1">
            <tr><td class="inn">data</td></tr>
            <tr><td class="inn">data</td></tr>
            <tr><td class="inn">data</td></tr>
            <tr><td class="inn">data</td></tr>
          </table>
        </th>
        <th>
          <div id="hlink2">Heading_Link2</div>
          <table  id="data2">
            <tr><td class="inn">data</td></tr>
            <tr><td class="inn">data</td></tr>
            <tr><td class="inn">data</td></tr>
            <tr><td class="inn">data</td></tr>
          </table>
        </th>
        <th>
          <div id="hlink3">Heading_link3</div>
          <table  id="data3">
            <tr><td class="inn">data</td></tr>
            <tr><td class="inn">data</td></tr>
            <tr><td class="inn">data</td></tr>
            <tr><td class="inn">data</td></tr>
          </table>
        </th>
      </table>
    </div>
  </body>
</html>

＆＃13;

为什么这在Firefox，Chrome和IE中的工作方式不同？

1 个答案: