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

前端之家收集整理的这篇文章主要介绍了使用display:table时,Safari中的CSS3大小调整不起作用前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
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.

原文链接:https://www.f2er.com/css/242165.html

猜你在找的CSS相关文章