6 
    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，这意味着它的大小取决于内容框。谁能告诉我为什么它不适合我？

4

1 回答 1

9

您正在使用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.

于 2012-11-13T21:14:21.300 回答