关注前端开发微信微信号web007007

IE6-bug之盒子左右border边框断线问题

作者 管理员 发布时间 2012-06-27 01:27 文章分类 DIV&CSS 文章评论 1条评论 阅读次数

先上图:

IE6-bug之盒子左右border边框断线问题—WEB前端开发网

再上代码:

<div style="border: 1px solid #ccc; margin: 600px 400px 50px; padding: 10px; line-height: 3;">
<ul style="float: left;">
	<li>1、新闻标题新闻标题</li>
	<li>2、新闻标题新闻标题</li>
	<li>3、新闻标题新闻标题</li>
</ul>
<ul style="float: right;">
	<li>1、快讯标题快讯标题</li>
	<li>2、快讯标题快讯标题</li>
	<li>3、快讯标题快讯标题</li>
</ul>
</div>

如此现在相信很多朋友在测试网页IE6兼容性的时候都遇到过,就是在IE6下拖动滚动条就能看到该模块边框断线现象,但刷新又好了。下面就来详解下

触发该BUG的条件:

容器内有两个或多个浮动的子元素,并在子元素末尾用clear清除浮动。

解决方案:

1、给父级元素设置height:1%或zoom:1等 (触发IE6 haslayout)

2、给父级元素设置固定宽度width (同样也能触发IE6 haslayout)

3、给父级元素设置一个背景色background-color (暂无解释)

笔者比较推荐第一种方法来解决这个问题,关于IE-haslayout属性详解请参考 进入>>

当然,本文也是就事论事,就该问题谈该问题的解决方法,其实在日常布局中,笔者不推荐类似在子元素末尾加个空div用clear来清除浮动,推荐大家使用另一种.clearfix类方法来清除浮动闭合容器,具体请详细阅读文章“clearfix清除浮动闭合容器之:after与:before”。

本文固定链接: http://www.web92.net/485.html | WEB前端开发

该日志由 于2012年06月27日发表在 DIV&CSS 分类下, 你可以发表评论,并在保留原文地址及作者的情况下引用到你的网站或博客。
原创文章转载请注明: IE6-bug之盒子左右border边框断线问题 | WEB前端开发
关键字: