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,这意味着它的大小取决于内容框.谁能告诉我为什么它不适合我?
解决方法
您正在标题上使用display:table.这似乎触发了一些额外的填充.添加边框折叠:折叠似乎解决了它:
http://jsfiddle.net/7Yhwb/1/(不包括:
http://jsfiddle.net/7Yhwb/)
编辑:我认为这是Safari 6.0.2正在使用的WebKit版本(536)中的一个错误.在使用WebKit 536的旧版Chrome 20中,该错误也存在.
在最近使用WebKit 537的Chrome版本中,似乎已修复.
要解决您的问题,我会切换到display:block.