Posted on 2013-04-12 16:25
xcp 阅读(1856)
评论(0) 编辑 收藏 所属分类:
CSS
今天，在做毕业设计的时候，做到一个新闻列表的时候，被垃圾IE6样式卡住了！先上一张对比图片。
chrome-IE6效果对比
正如，图片上的说明：在IE6（没有测试IE7或更高版本）li标签的第一条“联系我们”，没有前面的：点。看一下我的demo代码啊吧~
<body>
<style type="text/css">
.news-list{
width:200px;
background:#0f0;
}
.news-list ol{
padding:10px 10px 10px 10px;
}
.news-list li{
height:20px;
list-style:disc inside;
}
</style>
<div class="news-list">
<ol><li>联系我们</li>
<li>关于我们</li>
<li>哈哈</li>
</ol>
</div>
</body>
要触发这个BUG有不少“要点”啊！第一 、.news-list ol{ padding:10px 10px 10px 10px;} 这条样式必须要有，更确切的说是第一个“10px”必须有，当然你可以换成其他像素值，零除外！当改成0之后这个bug就没有了~，这也就是我为什么把这个分开写，没直接写成：.news-list ol{ padding:10px ;}，这样的原因。
第二点、 .news-list li{ height:20px; list-style:disc inside;}，这个里面也有一个必要的：高度。当你把这个高度去掉的时候，你会发现这个bug也会消失。
有上面这两个“苛刻”的条件，估计也就是为什么很少有人碰到的原因吧！知道了原因解决当然不是问题。从上面的两点就可以很好的解决这bug了。
方法一、当然就是准对第一个条件的，如果可以去掉padding。
方法二、当然也是在不影响布局的情况下：去掉 height
方法三、任然还是去掉：.news-list ol{ padding:10px 10px 10px 10px;} 这条样式，同时在ol标签的父标签（这里的父标签就是<div class=”news-list”>了，当然你还可以在这个中间加入一个div）中加入这条样式。这样既不会影响布局，又能很好的解决这个bug，下面是我的第三种解决方法代码：
<body>
<style type="text/css">
.news-list{
width:200px;
background:#0f0;
padding:10px 10px 10px 10px;
}
.news-list li{
height:20px;
list-style:disc inside;
}
</style>
<div class="news-list">
<ol><li>联系我们</li>
<li>关于我们</li>
<li>哈哈</li>
</ol>
</div>
</body>
名称: ♪4C.ESL | .↗Evon
口号: 遇到新问题♪先要寻找一个方案乄而不是创造一个方案こ
mail: 联系我