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

我只想问以下问题：

为什么表在不同的浏览器中表现得很奇怪？这种行为与其他标记相同吗？即使是我的数据，尽管反复居中也不能显示它应该显示的方式。我使用“测试对齐”的方式有问题吗？（我还没有发现与其他标签的任何差异）

当我尝试在

中放置“id”属性时，为什么它看起来像块元素

如何更改onMOuseOut，使其在鼠标离开显示的选项之前不会关闭

正文{
边际：0px；
填充：0px
}
#标题{
高度：150像素；
背景颜色：绿色；
利润率：10px；
}
#导航栏{
高度：60px；
背景色：青色；
文本对齐：居中；
利润率：10px；
填充：0px；
}
#hlink1{
背景色：石灰；
文本对齐：居中；
高度：40px；
填充：3倍；
左边距：0px；
右边距：0px；
边缘顶部：5px；
边缘底部：5px；
}
#hlink2{
背景色：石灰；
文本对齐：居中；
高度：40px；
填充：3倍；
左边距：0px；
右边距：0px；
边缘顶部：5px；
边缘底部：5px；
}
#hlink3{
背景色：石灰；
文本对齐：居中；
高度：40px；
填充：3倍；
左边距：0px；
右边距：0px；
边缘顶部：5px；
边缘底部：5px；
}
#hlink1：悬停{
背景色：浅绿色；
文本对齐：居中；
}
#hlink2：悬停{
背景色：浅绿色；
文本对齐：居中；
}
#hlink3：悬停{
背景色：浅绿色；
文本对齐：居中；
}
桌子{
宽度：100%；
边界塌陷：塌陷；
文本对齐：居中；
}
#数据3{
背景色：石灰；
填充物：5px；
高度：0px；
显示：无；
}
#数据2{
背景色：石灰；
填充物：5px；
文本对齐：居中；
高度：0px；
显示：无；
}
#数据1{
背景色：石灰；
填充物：5px；
文本对齐：居中；
高度：0px；
显示：无；
}
霍弗酒店{
背景色：浅绿色；
}

实验
标题链接1
标题链接2
标题链接3
数据
数据
数据
数据
数据
数据
数据
数据
数据
数据
数据
数据

如果不同时更改表内结构的显示值，则不应尝试更改表的显示值。虽然从技术上讲不是错误，但这相当于将

tr

放在

span

中；浏览器显然处理方式不同。
现在，如果将鼠标悬停事件更改为

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

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

至于第3点，这可能需要在结构上稍作改变。目前，数据表与悬停行位于不同的行中，因此它们不会相互影响。如果将这些数据表直接放在标题单元格中，则悬停操作会容易得多；您甚至不需要JavaScript事件

标题链接1
数据
数据
数据
数据

和CSS：

#导航栏th:悬停表{
显示：表格
}

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

正文{
边际：0px；
填充：0px
}
#标题{
高度：150像素；
背景颜色：绿色；
利润率：10px；
}
#导航栏{
高度：60px；
背景色：青色；
文本对齐：居中；
利润率：10px；
填充：0px；
}
#hlink1，#hlink2，#hlink3{
背景色：石灰；
文本对齐：居中；
高度：40px；
填充：3倍；
左边距：0px；
右边距：0px；
边缘顶部：5px；
边缘底部：5px；
}
#hlink1:悬停，#hlink2:悬停，#hlink3:悬停{
背景色：浅绿色；
}
桌子{
宽度：100%；
边界塌陷：塌陷；
文本对齐：居中；
}
#数据1、数据2、数据3{
背景色：石灰；
填充物：5px；
显示：无；
}
霍弗酒店{
背景色：浅绿色；
}
#导航栏{
垂直对齐：顶部；
}
#导航栏th：悬停表{
显示：表格
}

实验
标题链接1
数据
数据
数据
数据
标题链接2
数据
数据
数据
数据
标题链接3
数据
数据
数据
数据

您能解释一下您的第2点吗？哪个元素开始表现得像块元素？td元素。在firefox中。它的宽度是28像素，而在色度中，它的宽度是表格元素的宽度，与IEHm相同，很有趣。不知道，对不起。顺便说一句，我刚才编辑了我的答案来解决第3点；希望有帮助！您能否简单地说一下，当您将显示值从内联更改为表时，实际发生了什么？我尝试使用块值，但没有得到结果（得到的结果是高度为2px的元素及其外部的数据）。当您更改显示值时，居中是如何变化的？正如我所说的，这类似于不使用

元素，而是使用

tr

元素的

span

。浏览器应该适应这样的情况，但显然它们不是以同样的方式做到的！