1

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

基本上我有一个带有大表格的页面，所以我创建了一个额外的标题，其中包含一个“位置：固定”属性，当您向下滚动页面时（使用一些非常简单的 JS 代码）会出现（并保持可见）。

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

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

更新：通过解决 Firebug 中的问题，我缩小了原因。首先介绍一点背景。我没有为我的“浮动”标题创建一个完全独立的表格类，而是给了它一个特殊的 ID（“浮动”）并允许它从我的普通表格中继承大部分 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 禁用“显示：无”样式设置，浮动表格的单元格是完美间隔的。但是，一旦我开始向下滚动页面并且 JS 启动，列宽就会改变！但那时，如果我进入 Firebug 并在 CSS 面板中禁用“display:block”，它会修复对齐。

header.style.display = "block";不做我想做的事也不行；而不是仅仅反转“显示：无”CSS（这是我想要的），它以某种方式重置列宽。同上header.style.display = "inline"。我可以使用另一个 JS 语句来简单地禁用“显示：无”吗？

4

1 回答 1

0

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

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

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

如果你希望你的 CSS 样式是跨浏览器的，你必须使用重置。

于 2012-08-12T03:29:29.597 回答