1. 程式人生 > >IE8兼容問題

IE8兼容問題

總結 網站 說明 -s div for ecs 出現 方便

最近做的網站,需要兼容IE8,在這裏記錄一下,碰到的問題,方便以後查看補充

1.CSS選擇器nth-child 不兼容

ul li:nth-child(2){
     background-image: url(../img/2.jpg);
     background-size: cover;
}

IE8不兼容 這種寫法 在網上百度了一下 兼容寫法 戳這裏

由於我的是少數靜態輪播圖的樣式,所以采用了 添加類名的這種比較low的方式來解決

2.CSS屬性 cover 背景自適應鋪滿容器的這個屬性 在IE8中不起作用

background-size: cover;  IE8以上版本可支持

 兼容寫法:

.Scroll1 .full li{
    width: 100% !important;
    background: url(../img/1.jpg) top center no-repeat;
    background-size: cover;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
        src=‘http://static.yuntongauto.com/bjzy/img/1.jpg‘, //背景圖絕對地址
sizingMethod=‘scale‘); //scale 就是cover的全鋪
}

  這裏說明一下 當設置好fliter的時候 會將樣式重寫在標簽的內聯樣式表 如圖:

技術分享

所以註意一下修改樣式的問題

3. IE8下 a標簽中圖片出現border 和默認藍色 color

<a href="#"><img src="1.jpg"></a>

  a標簽裏的img會出現藍色border 而且a標簽內默認字體顏色會變成藍色

這裏會需要 img{border:none;

4.video 標簽不支持

 <video width="100%" height="515px" controls preload>
       <source src="1.mp4" type="video/mp4" codecs="avc1.42E01E,mp4a.40.2">
       <!–[if lt IE 8]>
             <embed src="1.mp4" width="100%" height="515px" autostart=false/>
       <![endif]–>
</video>

  這裏是我自己研究出來的解決辦法 註意 embed標簽在移動端無法顯示視頻

參考了網上關於video的兼容解決 還有很多解決辦法 總結最好的 是這個 http://www.cnblogs.com/mengfangui/p/7122130.html

這是目前遇到的關於IE8的兼容 以後遇到在進行匯總

IE8兼容問題