前端录网站,记录前端点点滴滴,帮助程序猿快速成长!

IE6中浮动元素不加宽度的后果

前端兼容
先看bug示例图:

高级浏览器:

IE6下:

案例中的结构是这样的:

<li class=""><a rel="nofollow" class="type-click btn-one-new" gateid="&lt;b&gt;Notice&lt;/b&gt;: Undefined index: attri_id in &lt;b&gt;/var/www/fancyladies/catalog/view/theme/fancyladies/template/module/category_filter.tpl&lt;/b&gt; on line &lt;b&gt;8&lt;/b&gt;" href="javascript:;">Types</a></li>
.attr_filter{float:left;}
.attr_filter li{margin-left:3px;padding-left:20px;background-position:0 0;float:left;}
.attr_filter li.active{background-position:0 -32px;}
.attr_filter li a.active{background-position:right -32px;}
.attr_filter li.hover{background-position:0 -64px;}
.attr_filter li a.hover{background-position:right -64px;}
.attr_filter li,.attr_filter li a{background-image:url(../images/filter_btn.jpg);background-repeat:no-repeat;height:32px;}
.attr_filter li a{background-position:right 0;color:#fff;line-height:26px;padding-right:20px;outline:none;display:inline-block;}
.attr_filter li a:hover{text-decoration:none;}

我把a元素改成display:inline-block后ie6下就正常了。所以一个没给宽度的浮动元素中里面的子元素最好别是块状元素。

IE6 对浮动元素内的未指定宽度的块级元素错误的解释 BUG 
我们来看下面的代码:

<div id="left">
        <div id="title">Title</div>
</div>

样式定义如下:

#left{ float:left; border:1px solid blue; padding: 10px; }
#title{border: 1px solid green; padding:10px;}

很简单,在一个浮动的DIV内有一个DIV。这段代码在各浏览器中都能正确显示,如下:

但是当给 #title 加上一个高度的样式后,如下:

#left{ float:left; border:1px solid blue; padding: 10px; }
#title{border: 1px solid green; padding:10px; height:100px;}

加了高度后,在各浏览器上面的显示效果为:

在 IE7 中显示正常(经测试,在 Firefox 和 Opera 中效果相同),而在 IE6 中,宽度发生了变化。大家如遇此情况要注意啦。

解决方法:给其你容器指定宽度,如果宽度不确定需要的我们可以用hack来解决,只需在IE6下加上_width:1%即可解决。



转载请注明:前端录»IE6中浮动元素不加宽度的后果