Bug:IE6中浮动元素3px间隔_html/css_WEB-ITnose
程序员文章站
2022-03-20 20:43:18
...
发生场合:一个元素浮动,然后一个不浮动的元素自然上浮与之靠近会出现的3px的间距。
以下为个人所做测试:
test01:不浮动元素为块级元素
box01box02
.box01{float: left; background: #f1c100;}.box02{background: red;}
ie6效果:没有出现3px间距
test02:不浮动的元素修改为行内元素
box01box02
.box01{float: left; background: #f1c100;}.box02{background: red;}
ie6效果:出现3px间距
test03:修复这个3px间距 (方法一)
html结构按照test02,css如下:
.box01{float: left; background: #f1c100;}.box02{background: red;_margin-left:-3px;}/*_margin-left:-3px;修复3px间隔bug*/
效果:没有间距
test04:修复这个3px间距 (方法二)
结构同上,css如下:
.box01{float: left; background: #f1c100;}.box02{background: red;float: left;}/*让不浮动元素也浮动起来*/
效果:没有间距
小结:
据此,可以完善此bug 发生场合:一个元素浮动,然后一个不浮动的行内元素自然上浮与之靠近会出现的3px的间距。
上一篇: HTML5编程实战之一-实现HTML5时钟的示例代码分享
下一篇: HTML实现鼠标拖拽排序功能