Question

我正在尝试为我的网站实现跨浏览器的一致性。

关于此页面：http://www[insert-dot-here]geld[insert-dash-here]surfen[insert-dot-here]nl/uitbetalingen.html（请注意，我更喜欢此网址不能被seo-bot抓取）

如果您在IE，Firefox或Opera中查看此页面，一切都很好，但在Chrome和Safari中，表格有点不合适（您可能会注意到这一点）。

似乎有什么问题？

在我看来，在Chrome和Safari中，左右边框（2px）总计被添加到设置表格宽度，而在其他浏览器中，边框被视为宽度的一部分。

（大多数）相关的CSS行是以下的（来自table.css文件，也可以通过页面的源文件获得）：

table.uitbetaling {
 margin: 11px 18px 10px 19px;
 border: 1px solid #8ccaee;
 width: 498px;
 padding: 0;
}
table.uitbetaling img, table.uitbetaling td {
 margin: 0;
 border: 0;
 padding: 0;
 width: 496px;
}
table.uitbetaling tr {
 margin: 0;
 border: 0;
 padding: 0 1px 0 0;
}

所以基本上我使用了表结构来组织图像，如下所示:(表的类是uitbetaling）

<table>
<tr><td><img /></td></tr>
<tr><td><img /></td></tr>
...
<tr><td><img /></td></tr>
</table>

如果，在这里，我将table.uitbetaling和table.uitbetaling img, table.uitbetaling td的宽度设置为相同的值（例如，496或498），Chrome中的“问题”和Safari已经解决，但在Firefox中，右侧边框不是空白。因为右侧边框不再“适合”。 img和td必须至少比table.uitbetaling宽2px，因为在Firefox中可以看到右边框。

有什么方法可以解决这个问题吗？

Answer 1

现在你应该使用HTML5 doctype，如果你有关于边框的问题，将自己添加到元素的宽度中查找CSS样式： box-sizing

border-box - 包含边框宽度/高度和填充宽度/高度或基本上您设置的宽度包括边框/填充

内容框 - 您在元素上设置的宽度只是内容区域，不包括填充或边框

还有我不使用的填充框，通常上面两个就足够了。

现在有时，我认为IE8使用的是与Chrome / FF等不同的盒子大小，这就是为什么有时你会遇到问题。您始终可以调试并检查框大小设置的内容。

注意：如果您没有DOCTYPE，那么您处于怪癖模式，并且IE在盒子大小/盒子模型上与Chrome / FF不同 - 这就是您的问题

Answer 2

尝试：

table{border-collapse:collapse;}

Answer 3

将您的代码细分为最简单的元素，并在每个浏览器上对其进行测试。当您发现差异时，可以使用不同的浏览器检测方法巧妙地更改每个实例的代码。有了这样说......如果你不想疯狂疯狂，那么CSS会做更多的事情，那么编程中的任何东西都会让像素继续下去。

Answer 4

为了安全起见，我通常以这种方式打开一张桌子：

<table cellspacing="0" cellpadding="0">

它是“旧的”HTML，但至少它会强制浏览器的一致性，然后我根据需要应用CSS。

Answer 5

我查看了Opera 11，Google Chrome 7.0.517.44和FireFox 3.6.12与您的网站设计没有任何区别。

Answer 6

您是否声明了DTD（DOCTYPE）？

阅读本文：

http://msdn.microsoft.com/en-us/library/bb250395.aspx

看起来浏览器有不同的方式来显示边框，但DOCTYPE声明（位于html文档的顶部）迫使它们遵守实际标准，至少在css框模型方面。

注意：我总是使用xhtml过渡DTD使我的文档尽可能兼容......

祝你好运！

Answer 7

总是在css中设置table{border-collapse:collapse;}，然后在html中使用cell-padding="0"和cell-spacing="0"这是一种很好的做法。

CSS：Chrome和Safari似乎可以“添加”宽度边框，而IE，Firefox和歌剧没有

7 个答案: