当前位置:K88软件开发文章中心编程语言JavaScriptJS01 → 文章内容

IE6/7下list-style-type:decimal不兼容问题处理

减小字体 增大字体 作者:佚名  来源:网上搜集  发布时间:2019-1-4 8:48:28

-->

今天在做公司的一个项目的时候遇到一个问题,使用OL > LI列表的时候使用了list-style-type:decimal属性,居然在IE6/7下面前面数字全是1,在其他浏览器下正常,代码如下,

<ol class="news-list">

  <li><a href="#nogo">什么是竞彩篮球?</a></li>

  <li><a href="#nogo">竞彩篮球怎么玩?</a></li>

  <li><a href="#nogo">买竞彩篮球,中奖了怎么办?</a></li>

  <li><a href="#nogo">怎样核对是否中奖?</a></li>

  <li><a href="#nogo">让分数是什么意思?</a></li>

  <li><a href="#nogo">预设总分是什么意思?</a></li>

  <li><a href="#nogo">为什么是主队在后,客队在前?</a></li>

  <li><a href="#nogo">固定奖金与浮动奖金的区别?</a></li>

  <li><a href="#nogo">奖金计算方式?</a></li>

  <li><a href="#nogo">竞彩篮球有哪些投注方式?</a></li>

CSS代码:
.news-list{margin:10px 10px 14px 36px;}
.news-list li{height:24px;line-height:24px;list-style-type:decimal;}

显示效果如下:

琢磨了一会发现了解决办法:li高度不能设置高度,并且如果你设置宽度也会造成上面的情况【:若是用ol也是和ul同个事理,不要给ol  li 设置宽和高的样式。】

原因:给li设定高度之后,会触发IE6/7的hasLayout,列表记数会被复位。

HOHO,你们是否也遇到这个问题不?

k88编程网

#IE6%2F7%E4%B8%8Blist-style-type%3Adecimal%E4%B8%8D%E5%85%BC%E5%AE%B9%E9%97%AE%E9%A2%98%E5%A4%84%E7%90%86.html”>k88编程网/IE6%2F7%E4%B8%8Blist-style-type%3Adecimal%E4%B8%8D%E5%85%BC%E5%AE%B9%E9%97%AE%E9%A2%98%E5%A4%84%E7%90%86.html


IE6/7下list-style-type:decimal不兼容问题处理