分類  >  Web前端 >

IE6-八 filter雙重濾鏡bug

tags:    時間:2013-12-10 15:35:46
IE6-8 filter雙重濾鏡bug

最近在做一個旋轉木馬的特效時候碰到了一個很詭異的問題在IE8以下的IE內核瀏覽器中,當一個父級定義了filter的alpha時,如果它子級也有濾鏡則這個層中的文字全部會變為灰色(小半透明形式展示)如下例:

<!doctype> <html> <head> <style> 	.box-item{width:500px;height:200px;border:1px solid #333;position:relative;background:#f5f5f5;filter:alpha(opacity=100);opacity:1;} 	.infro-bx{font:bold 18px/50px 'songti';text-align:center;color:#f00;} 	.comment-bx{height:50px;width:100%;position:absolute;bottom:0;left:0;z-index:15;} 	.shade-bx{background:#000;opacity:0.5;filter:alpha(opacity=50);z-index:5;} </style> </head> <body>  	<div class="box-item"> 		<div class="comment-bx infro-bx">內容介紹</div> 		<div class="comment-bx shade-bx"></div> 	</div>  </body> </html>


這個時候在IE下層裡面的內容字體色展示效果會偏差非常大 特別是當filter中的opacity為80等不滿一百的時候幾乎為半透明灰色,而在IE9和其他非ie內核中卻正常解析,由於項目的周期比較近迫於無奈,只能浪費一個鏈這個透明遮罩通過png圖片去模擬,IE6下也就為不透明了。通過多次測試基於其他瀏覽器和IE9的正常解析個人把它歸入了IEBUG(其實應該是它特有filter解析方式不一樣引起的吧);


推薦閱讀文章

Bookmark the permalink ,來源:互聯網