前端調試：記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)。

最終效果 齊活兒

才疏學淺，若有問題懇請斧正。