Chrome 神秘地将页脚宽度增加了 3px

Question

我网站的页脚 Atlantic Sentinel 的宽度指定为 960px，最大宽度也指定960 像素。在 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;}

它不是小部件上的边距。我尝试删除一个，所以只有 3 个小部件，宽度为 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 声明，因为它不再需要了。

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

编辑2.错误报告。