今天發現原生IE8下面有一個神奇的bug，為什么這里說是原生IE8呢，因為我們在檢查頁面時，如果裝了IE9，大多數都只是會調出IE8模式來使用。
曾經我也非常相信這樣的調試是准確的，因為畢竟是微軟自帶的東西，沒理由會搞出差異化。直到今天，我發現事實並不是這樣的。
大家可以拷貝下面的代碼自己查看一下，就會知道。（推薦使用虛擬機，XP自帶的IE6升級到IE8 ，或WIN7自帶的IE8）。
<!DOCTYPE HTML> <html lang="zh"> <head> <style type="text/css"> .wrap { overflow: hidden; } .box { height: 28px; overflow: hidden; background: black; filter: Alpha(opacity=90); background: rgba(0,0,0,0.9) none repeat scroll 0 0; color: #FFF; } </style> </head> <body> <div class="wrap"> <div class="box"> <div id="J_wrap_1"></div> </div> </div> <script type="text/javascript"> /*在IE679下可以正常顯示計時器的數字，唯獨IE8是不顯示，在IE8下按Ctrl+a卻可以看到， 要用原生的IE8看，不要用IE8+的IE調到IE8模式，也因為這個bug我不敢再相信IE8模式了*/ var i = 1, w1 = document.getElementById('J_wrap_1'); setInterval(function() { w1.innerHTML = i; i++; }, 1000); </script> </body> </html>
前端總有解不完的bug，總有可能把你之前建立的三觀徹底改變。
我嘗試把樣式中的.wrap{overflow:hidden;}去掉，發現可以顯示了。但這個樣式在我的頁面中是必須的啊，不能去掉。
於是我恢復回這句，用了第二種方法，給.box{}加入一句width:200px。又或者給#J_wrap_1加一個float:left，都發現可以顯示，但是從2開始顯示。
前端工程師總有那么一點完美主義和帶有一些好奇心理，我用盡各種辦法，依然未能搞定這個bug，唯有用第二種方法了。
又或者改變一下HTML結構，不把數字放在半透明層里。
如果大家有什么好方法，回復我，小弟感激不盡。
除了提出這個bug之外，還提醒大家不要迷信IE9的IE8模式或IE10的IE8模式。