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

原创 2011年12月31日 15:30:28

问题描述

在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就用方案一。

ul ol li的序号编号样式

列表内容列表内容列表内容列表 列表内容列表内容列表内容列表 列表内容列表 列表内容列表内容4 列表内容列表内容5...
  • abeetle
  • abeetle
  • 2014年11月18日 15:14
  • 45057

前端HTML列表<ol> <ul> <dl>标签的属性和使用

1. 什么是列表&作用 将具有相似特征或先后顺序的内容按照从上到下的顺序排列起来 2.列表的分类 列表是由 列表类型 和 列表项 组成的           列表类型:           ...
  • baidu_25343343
  • baidu_25343343
  • 2016年10月05日 17:42
  • 3944

HTML/CSS中有序<ol>、无序<ul>、定义列表用法详解

ul
  • xiaokangmiclong
  • xiaokangmiclong
  • 2015年12月16日 11:41
  • 3662

关于闭包在IE9及之前浏览器的内存泄漏问题

闭包在IE9及之前浏览器中的内存泄漏问题。
  • h15882065951
  • h15882065951
  • 2017年07月17日 20:56
  • 122

java开发中遇到的Bug整理

java开发中遇到bug是再正常不过了,所谓程序不是写出来的是调出来的,bug的调试是程序开发中重要的一部分也是必不可少的一部分。以下是我项目开发中遇到的bug整理,有一些可能比较低级,但是我还是把它...
  • nqmysbd
  • nqmysbd
  • 2016年11月05日 11:26
  • 1924

Android实际开发中的bug总结与解决方法(二)

Android实际开发中的bug总结与解决方法(二)  解决bug中的总结:Fragment Transactions 和Activity状态丢失     Fragment transactio...
  • qyl10241024
  • qyl10241024
  • 2015年10月30日 15:08
  • 1043

VS调试Bug记录

这里记下我调试遇到的bug及解决方案,想到哪些记哪些。 1、wincrtl1.cpp 80错误 解决方案: 调试后发现定位到void CButton::DrawItem(LPDRAWITEMS...
  • yoyo18520
  • yoyo18520
  • 2017年05月01日 12:04
  • 386

IE6浏览器的bug问题及相关解决的方法

IE6浏览器的bug问题及相关解决的方法 1、css浮动边距加倍错误(双倍边距BUG)的解决办法   该错误只影响ie而不影响其他浏览器,我们可以考虑用hack来解决!!!   解决方法:_disp...
  • sinat_36146776
  • sinat_36146776
  • 2016年10月11日 09:17
  • 785

web移动开发中一些bug及解决方案

网页开发要面对各种各样的浏览器,让人很头疼,而移动开发中,你不但要面对浏览器,还要面对各种版本的手机,ios好一点,而安卓就五花八门了,你可能在开发中也被它们折磨过,或者正在被它们折磨,我在这里说几个...
  • zhangwang9li
  • zhangwang9li
  • 2016年04月15日 10:02
  • 893

AngularJS之表格序号

1、问题背景     AngularJS表格需要序号,可以利用$index来作为序号2、实现实例 AngularJS之表格序号 table,th,td{ ...
  • you23hai45
  • you23hai45
  • 2016年11月01日 23:42
  • 1279
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:IE9<ol>列表序号变0的bug及解决方法
举报原因:
原因补充:

(最多只允许输入30个字)