关于ol有序列表的小事儿...

这两天在制作电影排行榜的页面.

使用ol有序列表的时候,遇到了一个小的趣事.整理出来如下.

BUG: 出现场景:使用OL.IE6,IE7.

代码如下:

 <style type="text/css">
     .testol li{height:20px;}
 </style>
  <ol class="testol">
    <li>马嵬坡下泥土中,</li>
    <li>不见玉颜空死处.</li>
    <li>君臣相顾尽沾衣,</li>
    <li>东望都门信马归.</li>
    <li>归来池苑皆依旧,</li>
    <li>太液芙蓉未央柳.</li>
    <li>芙蓉如面柳如眉,</li>
    <li>对此如何不泪垂?</li>
  </ol>

我们理想状态是介个样子:

图:

 

可是,在IE6,7下却是介个样子.

图:

 

  太让人费解了...难道说IE67又抽风了?

　　　　 于是我就又改了一下代码,并进行了一下测试.

代码如下:

 <style type="text/css">
     .testli{*zoom:1;}
 </style>
  <ol>
    <li>马嵬坡下泥土中,</li>
    <li>不见玉颜空死处.</li>
    <li>君臣相顾尽沾衣,</li>
    <li class="testli">东望都门信马归.</li>
    <li>归来池苑皆依旧,</li>
    <li>太液芙蓉未央柳.</li>
    <li>芙蓉如面柳如眉,</li>
    <li>对此如何不泪垂?</li>
  </ol>

果然,结果是介个样子的.

原来..ol或者ol中单个的li获得了 layout 后都会影响列表的表现.尤其在IE6,7中列表的符号.它认为它自己有了layout了..于是决定脱离组织了.于是有了自己的计数器.

而悲哀的是,我们却对这种行为只能听之任之,我们无法通过外部去修正或去影响它的"内部机制".

所以当我们使用OL以实现有序排列的时候,应小心谨慎的在OL和LI上操作,尽量避免触发他的layout以求得页面的正确性.

例如. 限定尺寸我们可以用padding,或是把li里的元素单独设置高度.

 <style type="text/css">
    .testa{display:block;height:40px;line-height:40px;}
 </style>
  <ol>
    <li>马嵬坡下泥土中,</li>
    <li>不见玉颜空死处.</li>
    <li>君臣相顾尽沾衣,</li>
    <li>东望都门信马归.</li>
    <li><a href="" class="testa">归来池苑皆依旧</a></li>
    <li>太液芙蓉未央柳.</li>
    <li>芙蓉如面柳如眉,</li>
    <li>对此如何不泪垂?</li>
  </ol>

图: