关于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>
图:

 

 

posted @ 2012-02-29 19:23  荒漠千蝶  阅读(451)  评论(0编辑  收藏