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

Question

我只想问以下问题:

为什么 table 在不同的浏览器中表现异常？这种行为与其他标签相同吗？即使是我的数据，虽然反复居中也没有显示它的方式 should.Is 我使用的方式有问题 'test-align'？（我还没有发现与其他标签有什么区别）
当我尝试将 'id' 属性放入 <td element> 时，为什么它看起来像块元素？
如何更改 onMOuseOut 以便在我的鼠标离开显示的选项之前它不会关闭？

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;
}

<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>

Answer 1

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

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

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

至于第3点，可能需要在结构上稍作改动。目前，数据 table 与悬停行位于不同的行中，因此它们不会相互影响。如果将这些数据 table 直接放在 header 单元格中，则悬停会容易得多；你甚至不需要 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
}

无需在每个 header 单元格中详细说明所有 onmouseover 操作！

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
}

<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>

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

Why is this working differently in Firefox, Chrome and IE?

css

html-table

onmouseover

centering