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中浮动元素不加宽度的后果