J2EE社区

苟有恒,何必三更起五更眠;
最无益,只怕一日曝十日寒.
posts - 241, comments - 318, trackbacks - 0, articles - 16

IE6 list-style-type li的第一条不显示设置的列表类型

Posted on 2013-04-12 16:25 xcp 阅读(1525) 评论(0)  编辑  收藏 所属分类: CSS

今天,在做毕业设计的时候,做到一个新闻列表的时候,被垃圾IE6样式卡住了!先上一张对比图片。

chrome-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:20pxlist-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: 联系我



只有注册用户登录后才能发表评论。


网站导航: