使用display: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.