使用显示 : table 时，Safari 中的 CSS3 框大小调整不起作用

Question

    header {
    box-sizing:border-box;
    -moz-box-sizing:border-box; /* Firefox */
    -webkit-box-sizing:border-box; /* Safari */
    padding:10px;
    width: 960px;
    margin: 0 auto 0 auto;
    height:80px;
    display:table;
    background-color:#FFF;
}

我正在使用上面的 CSS 代码，在 Chrome 和 Firefox 中，这使标题的总宽度达到了 960px，但在我的 Safari 6.02 中，它应该只支持“box-sizing”而不需要前缀，但我无论如何，我得到的总宽度为 980px，这意味着它的大小取决于内容框。谁能告诉我为什么它对我不起作用？

Answer 1

您正在使用 display: table 在您的 header 上。这似乎触发了一些额外的填充。添加 border-collapse: collapse 似乎可以修复它:http://jsfiddle.net/7Yhwb/1/ (没有:http://jsfiddle.net/7Yhwb/)

编辑: 我认为这是 Safari 6.0.2 使用的 WebKit 版本 (536) 中的错误。在同样使用 WebKit 536 的旧版 Chrome 20 中，该错误也存在。

在使用 WebKit 537 的最新 Chrome 版本中，它似乎已修复。

要解决您的问题，我会切换到 display: block。