基于IE下ul li 互相嵌套时的bug,排查,解决过程以及心得介绍
发布时间:2024-04-19 10:42:32
检查bug的步骤
1. bug定位
在js脚本中,按照脚本执行的顺序,你可以用console或alert,来确定bug发生的代码区间,然后在区间内进一步来查找bug发生的具体代码段。
2. bug fix
通过排除,就是在插入节点内容的时候导致了bug,我用的是kissy的DOM.html()方法,其功能类似于DOM元素节点innerHTML方法,我起初认为是这个方法导致的IE6\7渲染出错,然后我换成了innerHTML方法,结果还是有误。
这时候我想到了内存泄露,看看是不是在循环拼接字符串的过程中,有循环引用或者其他原因造成内存泄露,然后在一些方法结束的时候,我把一些变量赋值null,来防止内存泄露(虽然不知道是否有效,但是至少我这么尝试过了),结果还是不行。
是不是数据过多,导致一下子渲染的时候崩溃呢?于是我减少了拼接的数据长度,这个起效了。1~3条数据的时候,可以渲染上,那就说明方法是没有错的;但是3条以上的数据,IE6\7还是无法响应。于是我又试着一条一条数据取持续插入,因为一次插入1条数据没有问题的话,我大不了多插入几次吧,但是IE还是有问题。其实,这时候我的思路已经偏离了。
后来找同事来看看,说之前也碰到过这个问题,是IE6\7下,标签没有正确闭合的原因导致的。没错,这就是这个bug的真正原因啦。后来,我把拼接的字符串打印出来,然后再使用格式化工具进行格式化,变很快发现了我拼接字符串的时候出现的这个问题,于是很快fix掉这个bug。我用的在线格式化工具:http://tool.chinaz.com/Tools/JsFormat.aspx
3. 测试
测试时候,我们写上一串html代码,并对一些标签不闭合,看看IE和chrome对比情况。
代码如下,在第二个li标签里,我们对ul标签中的其中一个<span>标签,做不闭合处理
<ul>
<li>
<ul>
<li>inner li</li>
<li>inner li</li>
<li>inner li</li>
</ul>
</li>
<li>
<ul>
<li>inner li</li>
<li>inner li</li>
<li>inner li
<span>not closed<span>error happend</span></li>
</ul>
</li>
<li>
<ul>
<li>inner li</li>
<li>inner li</li>
<li>inner li</li>
</ul>
</li>
</ul>
IE 和chrome下都正常显示,如上图。
接下来通过开发工具调试看看。
在IE7~9下面,dom结构错乱,发送错误的地方就在那个没有闭合的<span>标签那里,原来的第三个<li>节点的内容直接插到了<span>节点下面。
我们再来看看chrome下面的情况吧:第三个li正常的渲染到dom树里面,在发生错误的span标签那里,自动补上了一个span的闭合标签
4. 总结
各个浏览器在渲染html的时候表现不一样,尤其是IE浏览器同其他的浏览器。chrome和FF的容错性能很好,即使页面中存在html标签没有正常闭合,它也会智能的进行识别,并使其在浏览器中看上去无恙,且最终的DOM结构也没有问题,然而不好的一面就是你不知道你的代码有错,还以为一切正常。而IE8\9现在也可以这样处理,看上去页面内容没有问题,但是呢,通过开发工具,你可以看到错误的html代码没有正常的DOM结构。但是IE6\7就不会给你这样的机会,要么就直接崩溃了。
chrome可以容许我们犯错,而IE却对我们更加严格,虽然IE让我们很头疼,但是却对我们的代码提出了更高的要求!忽然觉得,有IE也蛮好的。。。
如果有一天,你发现IE下dom结构都无法渲染出来的时候,记得提醒自己,是否代码中有标签没有闭合。
猜你喜欢
- MySQL表中的约束(constraint)为了保证数据的完整性,(数据的精确性和可靠性)SQL规范以约束的方式对表数据进行额外的条件限制,
- 引入Gridgrid=Grid() # 可以分别调整上下左右的位置,可以是百分比,也可以是具体像素,如pos_top="50px&
- 1、python装饰器刚刚接触python的装饰器,简直懵逼了,直接不懂什么意思啊有木有,自己都忘了走了多少遍Debug,查了多少遍资料,猜
- 本文实例讲述了Python实现获取汉字偏旁部首的方法。分享给大家供大家参考,具体如下:功能介绍传入一个汉字,返回其偏旁部首字典分为本地字典与
- 本文实例讲述了python实现通过代理服务器访问远程url的方法。分享给大家供大家参考。具体如下:import urllibproxies
- iconv函数库能够完成各种字符集间的转换,是php编程中不可缺少的基础函数库。 1、下载libiconv函数库http://ftp.gnu
- 1、解决方法(1)忽视元组。缺少类别标签时,通常这样做(假设挖掘任务与分类有关),除非元组有多个属性缺失值,否则该方法不太有效。当个属性缺值
- 一,封装封装是面向对象编程思想的重要特征之一。(一)什么是封装封装是一个抽象对象的过程,它容纳了对象的属性和行为实现细节,并以此对外提供公共
- 前言我最近都在写一些Python 3.8的新功能介绍的文章,在自己的项目中也在提前体验新的Python版本。为什么我对这个Python 3.
- 1、需求分析首先我们打开地图搜索“鸿星尔克”:复制该链接到浏览器,发现这是一个json格式的数据集。
- 前言:在很多应用场景下,我们不但需要堆的特性,例如快速知道数据最大值或最小值,同时还需要知道元素的排序信息,因此本节我们看看如何实现鱼和熊掌
- 本文实例讲述了Python中函数及默认参数的定义与调用操作。分享给大家供大家参考,具体如下:#coding=utf8''
- 本文实例讲述了Python判断一个list中是否包含另一个list全部元素的方法。分享给大家供大家参考,具体如下:你可以用for in循环+
- 通常情况下,定义函数时都会选择有参数的函数形式,函数参数的作用是传递数据给函数,令其对接收的数据做具体的操作处理。在使用函数时,经常会用到形
- 前言离过年还有十多天,在这里提前祝各位小伙伴新年快乐呀~先说句题外话:疫情还是比较严峻,各位小伙伴要是出门的话一定要做好防护措施呀,不出门的
- 目录前言简介实现实现效果总结前言坦克大战是一款策略类的平面射击游戏,于 1985 年由 Namco 游戏公司发布,尽管时至今日已经有了很多衍
- 1. Django: Python Web应用开发框架Django 应该是最出名的Python框架,GAE甚至Erlang都有框架受它影响。
- SQL Server中的cmd_shell组件功能强大,几乎可通过该组建实现Windows系统的所有功能,正因此,这个组件也是SQL Ser
- 一个middleware的例子import timefrom django.urls import reversefrom django.u
- NULL值的概念是造成SQL的新手的混淆的普遍原因,他们经常认为NULL是和一个空字符串''的一样的东西。不是这样的!例如,