前言
用了一个很大的词“前端调试”，事情是这样的，这两天一直在解决一个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. 百度/谷歌大法
你懂得，有问题问度娘，疑难杂症一般在网上都有人分享或者吐槽，直接百度问题关键词。
调试过程与解决办法
解决问题的办法很多，简单写一下我的调试过程，虽然笨拙，写出来也可以避免大家重复我的笨拙。
-
确认jsp的文档头
之前遇到过静态页面是HTML5的文档头，开发用的是HTML4，会发现异常问题，确认jsp与静态页面一致后，排除文档头问题。
-
删除多余HTML标签
把其他元素全部删除，仅留下上拉加载部分的DOM标签，还是存在问题，然后再对比标签，无异常，排除标签闭合问题。
-
删除多余CSS样式
团队的同事们比较认真的学习过张鑫旭大神的《CSS世界》，按照**“z-index 不犯二原则”**，页面并没有使用z-index，使用的positon定位，并有增加，删除其他css代码后，还是可以复现，感觉与positon有关系。
-
删除JS代码
注释掉iscroll实例就好了，然后再github上找position的lssues， 找到讨论关于 z-index、translate、transform的lssues链接，然后提取关键词搜索。
-
定位到问题点
-
找到解决办法
根据内容的理解，增加了transform: translateZ(100px)。
最终效果 齐活儿
