Question

我希望这不是我需要采用浏览器检测的情况。

基本上我有一个带有大表的page，所以我创建了一个额外的标题，其中有一个“position：fixed”属性，当你向下滚动页面时出现（并保持可见）（使用一些真正的简单的JS代码）。

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

问题在于，一组宽度适用于Firefox，而另一组适用于Safari / Chrome，并且不适用于Opera。我猜我的CSS可能不是最佳的处理这种情况，但我不知道如何使它更好。任何人都可以看看（也许使用Firebug等）并让我知道是否有更好的方法来处理这个问题会使每个浏览器中的所有内容都排好？

更新：通过在Firebug中解决问题我已经缩小了原因。首先是一点背景。我没有为我的“浮动”标题创建一个完全独立的表类，而是给它一个特殊的ID（“浮动”）并允许它从我的普通表继承大部分CSS，除了我已经改变了背景将图像转换为相同大小的透明图像（以保留间距）并设置“display：none”。我的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”样式设置，浮动表的单元格是完美的间隔。但是，只要我开始向下滚动页面并且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样式跨浏览器，则必须使用重置。

HTML“width”属性在不同的浏览器中产生不同的结果？

1 个答案: