【css+div】IE6 absolute元素宽度被撑开

林氏智造 于 2013-12-08 发布 3727 人已阅

【写在前面】
今天好友乐乐写的插件遇到了个IE6无敌恶心BUG,经过不断测试最后还是百度到了解决方案。

【ie6 问题】
在使用绝对定位absolute后,绝对定位层的宽度不按照元素内元素的宽度自动缩放,而是按照父级元素的宽度扩张。

【实例】
HTML结构
    <div style="position:relative; background-color:#000000; height:20px; ">
        <ul class="list">
            <li>我是ul的li的元素,我是ul的li的元素</li>
            <li>我是ul的li的元素</li>
        </ul>
    </div>

说明:div相对定位,宽度继承body
CSS样式
ul,li{padding:0px; margin:0px;}
li{list-style:none;}
.list{position:absolute; background-color:#EAEAEA; top:10px; left:0px;}
.list li{height:24px;}
说明:.list使用绝对定位
FF,IE7,IE8显示效果


万恶的IE6


从以上两张图可以看出ie6的ul宽度竟然是和父元素div一样的。。纠结啊

【解决办法】
修改.list li的属性
.list li{height:24px; float:left; clear:both;}
这样子ie6的ul宽度就可以按照里面的元素宽度扩张了。

【写在后面】
IE6够万恶,我也不懂为什么会这样子,求高手指教;不过这个办法可以解决问题就OK拉!何必纠结自己呢!

标签

您可能感兴趣的文章

如何优雅的选择字体(font-family)

当前项目对字体要求很高,之前对font-family这个属性没怎么仔细去研究它,现在整理了一个通用方案适合大多数网站使用。

React+webpack 部署概要

React+webpack 组合已经成为开发react的经典搭配,把常用的webpack配置文件和一些react的常用代码规范记录下方便以后开发使用

gulp前端自动化部署方案

gulp 前端自动化代码,根据自己的项目需求编写,包括压缩合并css,压缩合并js,雪碧图,版本号插入等功能

纯CSS制作各种图形

用图片做图标会加大页面的大小,现在能用CSS写图标就用CSS写,维护起来也方便加载速度也快