IE8兼容性問題

因爲業務的須要，咱們居然還要支持IE8，聽着就讓人很心酸呀。不過在進行適配的過程當中，會發現仍是有必定規律的，基本上幫相關問題改了，頁面也就能正常顯示了。下面就總結下對IE8適配過程當中所進行的修改。

 

1. CSS不支持 rgb() 以及 rbga() 函數

建議在IE8上使用純色而非帶透明度的顏色，若是必定要使用有透明度的顏色的話，可使用 filter:alpha(opacity=xx);來模擬，但須要注意，用 filter 設置的透明度是對總體設置的，跟 opacity 同樣，而非僅僅對顏色起做用。

如

background-color: rgba(102, 102, 102, 0.2);

能夠改成

background-color: #666666;
background-color: rgba(102, 102, 102, 0.2);
filter: alpha(opacity=20); /*support iE8*/

 

2. :hover 樣式無效，由於在IE8上只有 <a> 標籤支持 :hover 樣式

建議將 :hover 樣式放在 <a> 上，若是必定要在 <span>，<li> 等標籤上使用，能夠利用 JavaScript 的 mouseenter 、mouseleave 等事件來設置樣式。

 

3. IE8僅部分支持CSS3選擇器，如 element1~element2 、 element1+element2 、 [attr^=val]  ,  [attr$=val] 以及 [attr*=val] ，不支持 :last-child 、 :not() 等選擇器，因此在選擇器的使用上須要注意

 

4. IE8不支持 background-size

有時爲了使圖片看起來更加清晰，部分背景會使用2倍圖，而後經過設置容器的大小以及 background-size 等屬性使圖片縮放到正確的尺寸，但因爲IE8不支持 background-size 屬性，因此使用2倍圖會超出容器大小，因此在IE8上要用CSS進行 hack 處理。

background-image: url(images/logo@2x.png);
background-image: url(images/logo.png) \9; /* ie8 hack，在ie8上使用1倍圖 */
background-size: contain;

須要注意，在less中要寫成 background-image: url(images/logo.png) ~"\9"; 

5. IE8中爲 <a> 的 href 屬性設置 mailto: xxxx; 時，瀏覽器會將 <a> 的顯示的內容替換成 href 屬性。

如 <a href="mailto:service@163.com">諮詢</a> ，在IE8上會顯示成 <a href="mailto:service@163.com">mailto:service@163.com</a> 。

這個是IE的一個BUG，正常來講，不解決也不會有什麼問題，可是若是必定要精益求精的話的話，能夠用JavaScript對其進行修改。