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

HTML <col> "width" property producing different results in different browsers?

本文关键字：浏览器 结果 属性 col width HTML      更新时间：2023-09-26

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

基本上我有一个带有大表的页面，所以我创建了一个带有"position：fixed"属性的附加标题，当您向下滚动页面（使用一些非常简单的 JS 代码）时，该属性会出现（并保持可见）。

但是，为了使该标题的列与较大表的列

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

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

更新：通过在Firebug中解决这个问题，我已经缩小了原因。 首先介绍一下背景知识。我没有为我的"浮动"标头创建一个完全独立的表格类，而是给了它一个特殊的 ID（"floater"），并允许它从我的普通表中继承大部分 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";没有做我想做的事;它不是简单地反转"display：none"CSS（这是我想要的），而是以某种方式重置列宽。 同上header.style.display = "inline". 是否有另一个JS语句可以用来简单地禁用"display：none"？

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

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

问题是每个浏览器都有一组"默认"样式。 如果不更改所有样式，则可能会使用任何给定浏览器的默认值。 重置后，所有浏览器都在同一位置启动。

如果您希望 CSS 样式跨浏览器，则必须使用重置。

相关文章：