232010/080/28
浏览器差异记录:盒模型高为0时,浏览器对边距的解析差异
有一段时间没有写日志了,今天抽空上来爬爬。
今天在做两栏布局的页面时,偶然发现在Google chrome和Safar中,我的div.clear清除浮动是有作用的,但是margin-bottom明明是50px,就是不显示出来。而其他浏览器是正常的。
还有,用firebug在Google chrome中查看div.clear元素,显示该元素被挤到右边了,真是很怪异。
后来查看.clear类我才发现,.clear高度是0px,改成1px就好了。
我的.clear类是这样的:
.clear
{
clear: both;
font-size: 0;
height: 0px; line-height:0px; overflow:hidden;
margin-bottom:50px;
}
小结:Google chrome和Safar把高度为0的元素的边距省略掉了,其他浏览器则不会。若要使边距显示出来,则需要给容器设置高度或者添加边框,以恢复盒模型解析。
希望以后碰到这个问题就不会那么头大了,哈哈。也希望对碰到同样问题的同学有帮助。
以下文章您或许也感兴趣
- 志不立,天下无可成之事
- Shellway祝大家:新春快乐,万事如意!
- 中文语言如何分类更合理?
- 不要太愤青
- 提笔忘字的悲哀
- 鞭打的快马,事找的忙人。
- 我的QQ不需要隐私,谢谢!
- Shellway博客终于开通了,哈哈
- 今天添加相册功能
- IE6、IE7的滚动条Bug