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。

使用display：table时，Safari中的CSS3大小调整不起作用

1 个答案: