前端调试：记Iscroll4 疑难杂症之z-index失效

前言

用了一个很大的词“前端调试”，事情是这样的，这两天一直在解决一个bug，咱们用iscroll作了一个下拉刷新的产品列表页面，总会出现页面渲染错乱的问题，只要用js动态修改html或者在浏览器开发者工具中修改css、html就会恢复正常。

原本想分享一下iscroll的问题，避免你们走弯路，后来索性把咱们定位问题的方法和过程也记录了一下。

页面效果

调试工具修改

目录

• 前言
• 以往诡异问题解决办法
  • 文档头类型
  • 标签闭合
  • 排除法
  • 百度/谷歌大法
• 调试过程与解决办法

以往诡异问题解决办法

之前也遇到过不少相似的问题，大部分是用如下三种方法解决的

1. 文档头类型**

文档头要告诉浏览器用什么类型的语言和版原本渲染你的代码。 大部份前端书籍都有介绍HTML的来历，推荐书籍《web标准开发之道》。

咱们须要了解HTML与XHTML的来历与版本,HTML 元素和有效的 DTD,出现渲染异常的问题以下：

• 文档头未定义
• 版本与标签不一致
• 标签是否须要闭合
• 标签是否支持大小写

简单列一下html与xhtml的历史

第一阶段 HTML4/HTML4.01

时间	HTML4\HTML4.01
1995年	IETF（因特网工程推进小组） 发布HTML2.0
1997年1月	W3C发布初版HTML标准：HTML3.2
1997年12月	W3C发布：HTML4.0
1999年12月	W3C发布：HTML4.01

第二阶段 XHTML1.0/XHTML1.01/XHTML1.2/HTML4.01 随后，W3C将重点放在向后兼容的XHTML上， 2000年年初，W3C发布：XHTML1.0 彻底兼容HTML4.01 紧随其后，XHTML1.1发布，放弃与HTML4.01兼容，移除大量样式标签、font、align等。

第三阶段 HTML2/XHTML5 2002年，W3C转变工做激进转变，提案HTML2，当时浏览器不支持、HTML4.01不兼容。 2007年，W3C内部提出HTML5，向后兼容 XHTML1.01 和 HTML4.01。 2009年放弃更新HTML2，而后就有了我们念叨的HTML5.

2. 标签闭合

不少先后端未分离的项目，常常出现后端工程师套完页面之后出现页面错乱的状况，大部分都是标签没有闭合或者js生成的DOM没有闭合，不少高版本的浏览器能够自动补全不规范的标签，不影响展现，可是不少低版本的浏览器就没有那么智能了，好比IE。

3. 排除法

这也是一个经常使用的办法，删除js和css，若是还复现，那确定是HTML的问题，而后再删50%的html，依次去定位问题，直到定位到问题代码代码。

4. 百度/谷歌大法

你懂得，有问题问度娘，疑难杂症通常在网上都有人分享或者吐槽，直接百度问题关键词。

调试过程与解决办法

解决问题的办法不少，简单写一下个人调试过程，虽然笨拙，写出来也能够避免你们重复个人笨拙。

1. 确认jsp的文档头

   以前遇到过静态页面是HTML5的文档头，开发用的是HTML4，会发现异常问题，确认jsp与静态页面一致后，排除文档头问题。

2. 删除多余HTML标签

   把其余元素所有删除，仅留下上拉加载部分的DOM标签，仍是存在问题，而后再对比标签，无异常，排除标签闭合问题。

3. 删除多余CSS样式

   团队的同事们比较认真的学习过张鑫旭大神的《CSS世界》，按照**“z-index 不犯二原则”**，页面并无使用z-index，使用的positon定位，并有增长，删除其余css代码后，仍是能够复现，感受与positon有关系。

4. 删除JS代码

   注释掉iscroll实例就行了，而后再github上找position的lssues， 找到讨论关于 z-index、translate、transform的lssues连接，而后提取关键词搜索。

5. 定位到问题点

   见张鑫旭大神的博客《Safari 3D transform变换z-index层级渲染异常的研究》

6. 找到解决办法

   根据内容的理解，增长了transform: translateZ(100px)。

最终效果 齐活儿

才疏学浅，若有问题恳请斧正。