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

xcp — Fri, 12 Apr 2013 08:25:00 GMT

今天，在做毕业设计的时候，做到一个新闻列表的时候，被垃圾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）中加入这条样式。这样既不会影响布局，又能很好的解决这个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>

xcp 2013-04-12 16:25 发表评论

常用且生僻的html标签(to me)

xcp — Thu, 15 Dec 2011 09:59:00 GMT

：不支持框架的显示noframes里面的内容<br /></div> <div><nobr>: 不换行显示内容<br /><map>定义一个图片，、<area>在图片上定点显示</div> <div><fieldset>可将表单内的元素分组,配合legend标签使用[使用title]</div> <div><optgroup>:标签定义选项组[下拉列表里面分组显示]</div> <div><sub>上标   <sup>下标  <del>文字上加删除线  <ins>文字下加划线</div> <div><ol>有序列表,前面显示下标标识  <ul>无序列表,前面显示圆点标识  <li>子项</div> <div><dl>内容块  <dd>内容标题 <dt>内容</div> <div><address>显示地址信息</div></div><br><br><div align=right><a style="text-decoration:none;" href="http://www.blogjava.net/xcp/" target="_blank">xcp</a> 2011-12-15 17:59 <a href="http://www.blogjava.net/xcp/archive/2011/12/15/366463.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div> </article> <article> <h1>CSS滤镜</h1> <p>xcp — Tue, 26 Jul 2011 11:55:00 GMT</p> <div><div>CSS滤镜<div>　　<a target="_blank" href="http://baike.baidu.com/view/15916.htm">css</a>滤镜的标识符式“filter”，总体的应用上和其他的css语句相同。css滤镜可分为基本滤镜和高级滤镜两种。 css滤镜分类可以直接作用于对象上，并且立即生效的滤镜称为基本滤镜。而要配合JavaScript等脚本语言，能产生更多变幻效果的则称为高级滤镜。<br /><br /><br /><br /><br /> </div><div><h2>alpha（通道）</h2></div><div>    alpha滤镜用于设定透明度，它的表达式如下： </div><div><div>    filter：alpha（opacity=opacity，finishopacity=finishopacity，style=style，startX=startX，startY=startY，finishX=finishX，finishY=finishY）　　其中opacity表示透明度等级，可选值从0~100，0代表完全透明，100代表完全不透明。Style参数指定了透明区域的形状特征。其中0代表统一形状；1代表线形；2代表放射状；3代表长方形。StartX和StartY代表渐变透明效果的开始坐标，finishX和finishY代表渐变透明效果的结束坐标。　　<br />    ie下实现方式filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50); 标准<a target="_blank" href="http://baike.baidu.com/view/7718.htm">浏览器</a>（FF、Chrome、Opera）下实现方式：opacity: 0.5;    <br />    filter:alpha(Opacity=5); /*IE*/<br /><div>    -moz-opacity:0.08; /*MOZ , FF*/</div><br /><br /><br /><div><h2>blur（模糊）</h2><br /><div>    模糊滤镜给予对象朦胧神秘的效果，它的表达式如下： </div></div></div></div><div>    filter：progid：DXImagetransform.microsoft.blur（makeshadow=makeshadow，pixelradius=pixelradius，　　shadowopacity=shadowopacity）； </div>    其中makeshadow代表是否处理为阴影，pixelradius表示模糊作用深度，shadowopacity表示阴影的透明度。<br />    <br /><br /><div><h2>Chroma(透明色)</h2></div><div>    chroma滤镜给予图像一个特定的颜色透明，它的表达式如下："filter:Chroma(Color=color)" </div>    说明：color：#rrggbb格式，任意。    <br />    例子：filter:Chroma(Color="#FFFFFF")<br /><br /><br /><br /><div><h2>DropShadow(投射阴影)</h2></div><div>    语法：STYLE="filter:DropShadow(Color=color,OffX=offX,OffY=offY,Positive=positive)" 　　<br />    说明：Color:#rrggbb格式，任意。　　<br />            Offx：X轴偏离值。　　<br />             Offy：Y轴偏离值。　　<br />             Positive：1或0。　　<br />     例子：filter:DropShadow(Color="#6699CC",OffX="5",OffY="5",Positive="1")</div><br /> <br /> <div><h2>FlipH（水平翻转）</h2></div> <div>    语法：STYLE="filter:FlipH" </div> <div>    例子：filter:FlipH<br /> <br /> <div><h2>FlipV（垂直翻转）</h2></div>     语法：STYLE="filter:FlipV"   <br />     例子：filter:FlipV<br /> <br /> <div><h2>glow（外边界光效）</h2></div> <div>    语法：STYLE="filter:Glow(Color=color,Strength=strength)" 　　<br />     说明：　　Color：发光颜色。　　<br />                    Strength：强度(0－100) 　　<br />     例子：filter:Glow(Color="#6699CC",Strength="5")<br />     滤镜：gray 　　<br />     语法：STYLE="filter:Gray" 　　<br />     例子：filter:Gray</div> <br /> <br /> <br /> <div><h2>invert（底片效果）</h2></div> <div>    语法：STYLE="filter:Invert" 　　<br />     例子：filter:Invert</div> <br /> <br /> <br /> <div><h2>mask（透明膜效果）</h2></div> <div>    语法：STYLE="filter:Mask(Color=color)" <br />     例子：filter:Mask(Color="#FFFFE0")</div> <br /> <br /> <div><h2>shadow（阴影效果）</h2></div> <div>    语法：filter:Shadow(Color=color,Direction=direction) 　　<br />     说明：　　Color：#rrggbb格式。　　<br />                    Direction：角度，0－315度，步长为45度。　　<br />     例子：filter:Shadow(Color="#6699CC",Direction="135")<br /> <br /> <br /> <div><h2>wave（正弦波纹打乱图片效果）</h2></div> <div>    语法：filter:Wave(Add=add，Freq=freq，LightStrength=strength，Phase=phase，Strength=strength) 　　<br />     说明：　　Add：一般为1，或0。　　<br />                    Freq：变形值。　　<br />                    LightStrength：变形百分比。　　<br />                    Phase：角度变形百分比。　　<br />                    Strength：变形强度。　　<br />     例子：filter:wave(Add="0",Phase="4",Freq="5",LightStrength="5",Strength="2")</div> <br /> </div> <br /> <div><h2>Xray（只显示轮廓）</h2></div> <div>    语法：STYLE="filter:Xray"<br />     例子：filter:Xray</div> <br /> </div> </div> <br /> </div><br><br><div align=right><a style="text-decoration:none;" href="http://www.blogjava.net/xcp/" target="_blank">xcp</a> 2011-07-26 19:55 <a href="http://www.blogjava.net/xcp/archive/2011/07/26/355078.html#Feedback" target="_blank" style="text-decoration:none;">发表评论</a></div> </article> </main></body></html>

BlogJava-J2EE社区-随笔分类-CSS

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

常用 且 生僻的html标签(to me)

常用且生僻的html标签(to me)