232010/080/34
浏览器差异记录：盒模型高为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的元素的边距省略掉了，其他浏览器则不会。若要使边距显示出来，则需要给容器设置高度或者添加边框，以恢复盒模型解析。
希望以后碰到这个问题就不会那么头大了，哈哈。也希望对碰到同样问题的同学有帮助。
<!-- JiaThis Button BEGIN -->
<div id="ckepop">
<a href="http://www.jiathis.com/share/" class="jiathis jiathis_txt jtico jtico_jiathis" target="_blank">分享到：</a>
<a title="分享到QQ空间" class="jiathis_button_qzone">QQ空间</a>
<a title="分享到人人网" class="jiathis_button_renren">人人网</a>
<a title="分享到开心网" class="jiathis_button_kaixin001">开心网</a>
<a title="分享到新浪微博" class="jiathis_button_tsina">新浪微博</a>
</div>
<script type="text/javascript" src="http://v1.jiathis.com/code/jia.js" charset="utf-8"></script>
<!-- JiaThis Button END -->
以下文章您或许也感兴趣
- 鞭打的快马，事找的忙人。
- 做HTML和CSS比绣花更甚
- 我的QQ不需要隐私，谢谢！
- 今天添加相册功能
- 中文语言如何分类更合理？
- 提笔忘字的悲哀
- 无端责备就是不善解人意
- 志不立，天下无可成之事
- 微软是个大Bug
- 浏览器差异：table宽度解析
