javascript - HTML <col> "width"属性在不同的浏览器中产生不同的结果？

Question

我希望这不是我需要求助于浏览器检测的情况。

基本上我有一个 page有一个大表，所以我创建了一个带有“位置:固定”属性的附加标题，当您向下滚动页面时(使用一些非常简单的 JS 代码)出现(并保持可见)。

但是，为了使该标题的列与较大表格的列正确对齐，我一直在手动设置每列的“宽度”属性(对于两个表格)，因为我的固定标题由于缺少额外的背景图像，单元格与我的普通表格标题单元格不完全相同。 (如果您只是通过上面的链接查看页面本身，那么所有这些可能更容易理解。)

问题是一组宽度适用于 Firefox，而另一组宽度适用于 Safari/Chrome，但均不适用于 Opera。我猜我的 CSS 可能不是处理这种情况的最佳选择，但我不知道如何让它变得更好。任何人都可以看看(可能使用 Firebug 等)并让我知道是否有更好的方法来处理这个问题，让每个浏览器中的所有内容都对齐？

更新:通过在 Firebug 中解决这个问题，我已经缩小了原因范围。首先介绍一点背景。我没有为我的“ float ”标题创建一个完全独立的表格类，而是给它一个特殊的 ID(“ float ”)并允许它从我的普通表格继承大部分 CSS，除了我已经改变了背景图像到相同大小的透明图像(以保留间距)并设置“显示:无”。我的 JS，我粘贴在这里:

$(window).scroll(function () {
     var header = document.getElementById("floater");
     if (($(window).scrollTop()) > ($(document).height() / 142)) {
        header.style.display = "block";       
     } else {
        header.style.display = "none";

 }
});

然后，如果您向下滚动到页面下方的某个点，“显示”将变为“阻止”。

我发现，如果我加载页面并在尝试滚动之前使用 Firebug 禁用“display: none”样式设置，则 float 表格的单元格间距完美。但是，一旦我开始向下滚动页面并且 JS 启动，列宽就会改变!但此时，如果我进入 Firebug 并在 CSS 面板中禁用“display:block”，它会修复对齐。

所以 header.style.display = "block"; 没有按照我的意愿行事；它不是仅仅反转“display:none”CSS(这是我想要的)，而是以某种方式重置列宽。 header.style.display = "inline" 也是如此。是否有另一个 JS 语句可以用来简单地禁用“display:none”？

Answer 1

您是否尝试过先应用良好的 CSS 重置样式？

例如http://meyerweb.com/eric/tools/css/reset/

问题是每个浏览器都有一组“默认”样式。如果您不更改所有样式，您可能会使用任何给定浏览器的一些默认样式。重置后所有浏览器都从同一个地方开始。

如果你想让你的 CSS 样式跨浏览器，你必须使用重置。