IE9列表序号变0的bug及解决方法

问题描述

在IE9下,页面中使用脚本切换<ol>列表或者其父容器的显示/隐藏状态时,列表前的序号经常全部变成0,偶尔也出现1,0,0,0.....,或者1,1,1,1....的情况。

测了IE9几个不同的小版本,都存在这个问题。

重现过程

1.新建空白HTML文档;

2.添加两个以上<ol><li>....</ol>的列表,display设为none;

3.添加按钮,写脚本,使点击按钮时切换不同的<ol>显示隐藏;

4.多次点击按钮,切换不同<ol>显示,发现,很大概率出现编号数字全为0,0,0,0...,正确应该是1,2,3,4...

重现代码如下:

<!doctype html>
<html>
<body>
<input type="button" value=" 1 " onclick="show(0)" />
<input type="button" value=" 2 " onclick="show(1)" />

<ol>
	<li>Hello World ! (1)</li>
	<li>Hello World ! Hello World ! </li>
	<li>Hello World ! Hello World ! Hello World ! </li>
	<li>Hello World ! Hello World ! </li>
	<li>Hello World ! </li>
	<li>Hello World ! Hello World ! </li>
</ol>

<ol style="display:none;">
	<li>Good Luck ! (2)</li>
	<li>Good Luck ! Good Luck ! </li>
	<li>Good Luck ! Good Luck ! Good Luck ! </li>
	<li>Good Luck ! Good Luck ! </li>
	<li>Good Luck ! </li>
	<li>Good Luck ! Good Luck ! </li>
</ol>

<script>
var ols = document.getElementsByTagName('ol');
function show(j){
    for(var i=ols.length-1;i>=0;i--){
        ols[i].style.display = i==j?'':'none';
    }
}
</script>
</body>
</html>

解决方法

经Google以及自己测试,主要有3种方法。

一、setTimeout重设一次其display样式。

缺点:有轻微闪烁;优点:无需多余DIV

function show(j){
    for(var i=ols.length-1;i>=0;i--){
        ols[i].style.display = i==j?'':'none';
    }
    //新增这一行
    setTimeout(function(){ols[j].style.display='';},0);
}

二、切换为显示时,设ol的start为其它值,setTimeout再设回来。

缺点:有轻微闪烁;优点:无需多余DIV

function show(j){
    for(var i=ols.length-1;i>=0;i--){
        ols[i].style.display = i==j?'':'none';
    }
    //新增这2行
    ols[j].start=2;
    setTimeout(function(){ols[j].start=1},0);
}

三、在最后一个ol或其父容器之后添加一个空DIV,切换ol时修改该DIV的内容。

缺点:需多余DIV;优点:无闪烁

……(略)
</ol>

<div id="empty"> </div>

<script type="text/javascript">
var ols = document.getElementsByTagName('ol');
function show(j){
    for(var i=ols.length-1;i>=0;i--){
        ols[i].style.display = i==j?'':'none';
    }
    document.getElementById("empty").innerHTML=' '; //这里是空格,不能是空字符串
}
</script>
空DIV必需放在最后一个</ol>之后,不能放在更前面。且空DIV的display不能是none,但可以将宽高设为0从而不影响布局。
推荐使用方案三,如果不能接受多余DIV就用方案一。
阅读更多

没有更多推荐了,返回首页