IE 歷史悠久的捉迷藏臭蟲 (Peek-a-boo bug)

同事之前實作了一個網頁 AP, 可是在 IE 上會發生文字隱形的狀況, 但是字仍然是存在, 只是看不到, 如果在 IE8 上可以用滑鼠選取該段文字, 或是把隱形的那一段捲到顯示區域外, 再捲回來就可以看到了, 可是如果是 IE9, 上面的方法都無效, 但如果按 Alt 顯示功能表或是按 F12 顯示開發者工具列, 就顯示出來了, 但在隱藏功能表或是開發者工具列, 文字就又隱形。

追查了之後才發現, 這應該是 IE 中歷史已經非常悠久的捉迷藏臭蟲 (Peek-a-boo bug), 詳細的解說可以參考 IE6 Peekaboo Bug 這篇文章, 基本上就是 IE 解譯 CSS 的問題, 而解決方案可以參考 Fixing invisible or disappearing text and double margins in Internet Explorer 這篇文章, 簡而言之, 就是在會消失的文字所屬的 div 加上這樣的 CSS style：

{ height: 0.01%; }

不過爬文的過程中, 明明有人說 IE7 已經搞定這個 bug 了, 顯然 IE 果然很複雜, 這麼多年了, 我還可以在 IE9 上遇到這樣的問題！