【瀏覽器兼容】IE8

1.不支持rgba
2.支持:first-child卻不支持:last-child
3.th會text-align:center,因此要在css開頭設定th {text-align:inherit}
4.display:none中的圖片不會加載
5.$(window).on('keydown')無效。只能使用$(document)
6.同上,click也無效。
7.IE7和IE8下png圖片背景變黑的bug解決方案:
【須要注意的是<img>不要加position,relative也不行】
http://blog.sina.com.cn/s/blog_73032b2f0101g4rl.html

一、不要直接改變圖片的透明度,而是給圖片套個容器,去修改這個容器的透明度

好比原代碼是:

    <img src="style/images/icon-shadow.png" class="share-list-icon-shadow"  />

修改爲

    <div class="share-list-icon-shadow"><img src="style/images/icon-shadow.png" /></div>

二、給這個容器加個背景顏色

很是重要,解決bug的關鍵就在這一步,好比:

    .share-list-icon-shadow{
        width:60px;height:21px;
        position:absolute;bottom:8px;left:0px;z-index: 1;
        margin: 0 auto;
        display:block;
        background:#FAFDEF;
    }

通常狀況下,到此bug就解決了,若是仍是有問題,請看下面:
三、給容器加個zoom: 1

8.jQuery fadeTo 時ie8 png圖片有黑色邊框:  【未驗證】
http://www.cnblogs.com/djiz/p/3323754.html

往帶有png圖的樣式里加 filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (enabled=true);
例如:.imageContainer img{display:block;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true);}
9.opacity會對子元素生效,但若是子元素設定position:relative,opacity不會生效。
10.使用jq的on綁定mousemove事件,只能在$(document)上綁,window和body都不行。
11.mouseup和mousedown事件也是同上。
12.IE8不支持inline-block,須要使用inline與zoom:1
13.inline與zoom:1,好像會使得背景圖片無效
14.綜12,13所述,IE8下使用float可能纔會有合理的表現。
15.IE8的有效css hack之一是媒體查詢@media (min-width: 0px) {  }
16.js中寫this.delete會報錯
17.scope.export會報錯
18.陰影必須有background纔會生效
-ms-filter:"progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=315, Color='#bbbbbb')";
19.接上,IE8的陰影彷佛是會視爲內邊距
20.[{},]結果是[{}, undefined]css

相關文章
相關標籤/搜索