Question

我网站Atlantic Sentinel的页脚宽度指定为960px，最大宽度也指定为960px。它在IE中看起来很好，但Chrome增加了3px的宽度。为什么，我无法理解。

这是相关的CSS：

#colophon {
clear: both;
display: table;
width: 960px;
max-width: 960px;
background: #131313;
overflow: hidden;
border-top: 3px solid #0099cc;}

#colophon .widget {
display: table-cell;
float: left;
width: 22%;
margin: 2em 0 2em 2em;
background: #000;
color: #ccc;
text-align: justify;}

这不是小部件的边缘。我已经尝试删除一个，因此只有三个小部件，22％宽，而额外的3px仍然存在于Chrome中。

我错过了什么？

Answer 1

删除display: table;规则。这是不必要的，您不需要将其更改为display: block之类的任何其他内容，因为这是默认设置，而您在示例中并未覆盖它。

Answer 2

尝试display:inline;代码而不是display: table-cell;，然后看看你是否已经实现了???

Answer 3

这似乎是webkit中的一个错误，修复它只是设置你的页脚明确地折叠你添加到页脚顶部的边框，如下所示：

#colophon {
 border-collapse: collapse;
}

请务必删除不再需要的overflow:hidden声明。

EDIT。是的，一个bug。管理在这里重新创建它，http://jsfiddle.net/PnYPr/。与webkit中的OP相同的问题。将提交错误报告。

编辑2. Bug报道。

Chrome神奇地增加了3px到页脚宽度

3 个答案: