CSS:Chrome和Safari似乎"加宽"边框宽度,而IE,Firefox和Opera则没有

Question

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

这是关于这个页面:http:// www [insert-dot-here] geld [insert-dash-here] surfen [insert-dot-here] nl/uitbetalingen.html(请注意我更喜欢这个URL不能被制作可抓取的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.uitbetalingFirefox中可见的右边框窄2px .

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

Answer 1

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

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

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

还有我不使用的填充盒,通常上面两个就足够了.

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

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

Answer 2

尝试：

table{border-collapse:collapse;}