IE8半透明不显示出文字
今天发现原生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模式。
