safari - CSS: Chrome and Safari seem to 'add' border to width, while IE, Firefox & Opera don't

Question

I'm trying to achieve cross-browser consistency for my website.

It's about this page: http://www[insert-dot-here]geld[insert-dash-here]surfen[insert-dot-here]nl/uitbetalingen.html (please note that I prefer this URL not to be made crawlable for seo-bots)

If you view this page in IE, Firefox or Opera, everything is fine, but in Chrome and Safari the tables are a little out of line (as you'll probably clearly notice).

What seems to be the problem?

It appears to me that in Chrome and Safari the left and right border (2px) in total are added to the set table width, while in the other browsers the border is considered part of the width.

The (most) relevant CSS-lines are the following ones (from the table.css file, also available through the page's source file):

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;
}

So basically I have used a table-structure to organize images, like this: (the class of the table is uitbetaling)

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

If, here, I set the width of table.uitbetaling and table.uitbetaling img, table.uitbetaling td to the same value (e.g. both 496 or 498), the "problem" in Chrome and Safari is solved, however in Firefox the right side border is than blank. Because the right-side border can't "fit" in anymore. img and td must be at least 2px more narrow than table.uitbetaling for the right-border be visible in Firefox.

Is there any way to solve this?

Answer 1

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

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

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

还有一个我不使用的padding-box，通常以上两个就足够了。

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

注意：如果您没有 DOCTYPE，那么您处于 quirks 模式，并且 IE 在 box-sizing/box 模型上与 Chrome/FF 完全不同 - 这就是您的问题

Answer 2

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

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

尝试：

table{border-collapse:collapse;}