ie8兼容性總結

時間 2019-12-02

原文原文鏈接

DOCTYPE

首先須要確保你的HTML頁面開始部分要有DOCTYPE聲明。DOCTYPE告訴瀏覽器使用什麼樣的HTML或XHTML規範來解析HTML文檔，具體會影響：css

對標記、attributes 、properties的約束規則
對瀏覽器的渲染模式產生影響，不一樣的渲染模式會影響到瀏覽器對於CSS 代碼甚至 JavaScript 腳本的解析

DOCTYPE是很是關鍵的，目前的最佳實踐就是在HTML文檔的首行鍵入：html

<!DOCTYPE html>

對於DOCTYPE的具體闡述就不展開了，能夠參考：《正確使用DOCTYPE》、《CS002: DOCTYPE 與瀏覽器模式分析》。前端

使用meta標籤調節瀏覽器的渲染方式

IE8中有一個「兼容性視圖」的概念，當初IE8發佈時，相對於IE6/7已經作出了很是大的改進，可是不少老站點僅針對IE6/7進行了優化，使用IE8渲染反而會一團糟。爲了照顧這些苦逼的前端工程師，IE8加入了「兼容性視圖」功能，這樣的話就能夠在IE8中使用IE6或IE7的內核渲染頁面。這個固然不是咱們想要的，因此須要使用meta標籤來強制IE8使用最新的內核渲染頁面，代碼以下：html5

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

IE=edge表示強制使用IE最新內核，chrome=1表示若是安裝了針對IE6/7/8等版本的瀏覽器插件Google Chrome Frame（可讓用戶的瀏覽器外觀依然是IE的菜單和界面，但用戶在瀏覽網頁時，實際上使用的是Chrome瀏覽器內核），那麼就用Chrome內核來渲染。關於此meta標籤的具體說明，可參見StackOverflow上的精彩回答。jquery

國內存在不少雙核瀏覽器好比360瀏覽器、搜狗瀏覽器，它們是怎麼決定某頁面到底使用哪一種內核渲染？下面引用一段360瀏覽器v6新特性的官方說明：css3

因爲衆所周知的狀況，國內的主流瀏覽器都是雙核瀏覽器：基於Webkit內核用於經常使用網站的高速瀏覽。基於IE的內核用於兼容網銀、舊版網站。以360的幾款瀏覽器爲例，咱們優先經過Webkit內核渲染主流的網站，只有小量的網站經過IE內核渲染，以保證頁面兼容。在過去很長一段時間裏，咱們主要的控制手段是一個幾百k大小網址庫，一個經過長期人工運營收集的網址庫。git

儘管咱們努力經過用戶反饋、代碼標籤智能判斷技術提升瀏覽器的自動切覈准確率。可是在不少狀況下，咱們仍然沒法達到百份百正確。所以，咱們新增長了一個控制手段：內核控制Meta標籤。只要你在本身的網站裏增長一個Meta標籤，告訴360瀏覽器這個網址應該用哪一個內核渲染，那麼360瀏覽器就會在讀取到這個標籤後，當即切換對應的內核。並將這個行爲應用於這個二級域名下全部網址。github

解決方法360已經告訴咱們了，經過meta標籤的方式建議其使用Webkit，代碼以下：web

<meta name="renderer" content="webkit">

我沒有作細緻的調查，不知道其餘的雙核瀏覽器是否支持此特性。chrome

Media Query

IE8彷佛沒法識別Media Query，因此須要hack一下啦！推薦採用Respond.js解決此問題，具體方法參見它的文檔便可。

實現CSS3的某些特性

IE8不支持CSS3的不少新特性，不過咱們可使用一些比較成熟的hack方法，我採用的是CSS3 PIE，它支持的特性有這些：border-radius、box-shadow、border-image、multiple background images、linear-gradient等。

特別注意：請必定閱讀CSS PIE給出的Know Issues。

識別HTML5元素

若是你在前端代碼中使用了HTML5的新標籤（nav/footer等），那麼在IE中這些標籤可能沒法正常顯示。我使用html5shiv，具體使用方法見文檔。

關於max-width

還有一個在IE8中常常遇到的問題就是max-width，網頁中圖片的尺寸可能比較寬，我會給它設置max-width: 100%來限制其寬度最大爲父容器的寬度，可是有時候卻不奏效，慢慢摸索才得知IE解析max-width所遵循的規則：嚴格要求直接父元素的寬度是固定的。經實驗發現Chrome所遵照的規則比IE鬆一些，因此這個問題應該不歸屬爲IE兼容性問題，不過我仍是提一下吧。分享兩個我遇到的場景：

（1）td中的max-width

若是針對td中的img元素設置max-width: 100%，在IE和Firefox你會發現不奏效，而在Chrome中倒是能夠的。經查詢發現須要給table設置table-layout: fixed，對此屬性的具體解釋見W3School。

（2）嵌套標籤中的max-width

以下的HTML結構：

<div class="work-item"> <a href="#" class="work-link"> <img src="sample.jpg" class="work-image img-responsive"> </a> </div>

最外層元素.work-item設置了固定寬度，可是對img設置max-width爲100%卻無效，後來才發現須要再對a標籤設置width: 100%，這樣才能使最內層的img標籤充滿整個div。

嵌套inline-block下padding元素重疊

HTML代碼：

<ul>
    <li><a>1</a></li> <li><a>2</a></li> <li><a>3</a></li> </ul>

CSS代碼：

ul li{ display: inline-block; } ul li a{ display: inline-block; padding: 10px 15px; }

按理來講a標籤之間的距離應該是30px，但在IE8中出現了重疊，只有15px。這裏和這裏也提到了一樣的問題。個人解決方法是使用float: left替代display: inline-block實現水平佈局。

placeholder

IE8下不支持HTML5屬性placeholder，不過爲解決此問題的js插件挺多的，好比：jquery-placeholder。

last-child

first-child是CSS2的內容，可是last-child就不是了，因此IE8不買帳。推薦的作法不是使用last-child，而是給最後一個元素設置一個.last的class，而後對此進行樣式設置，這樣就所有兼容了。

background-size: cover

若是你想使用background-size: cover設置全屏背景，很遺憾IE8辦不到...但可使用IE獨有的AlphaImageLoader濾鏡來實現，添加一條以下的CSS樣式：

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=Enabled, sizingMethod=Size , src=URL)

將sizingMethod設置爲scale就OK了。

還沒完，若是你在此背景之上放置了連接，那這個連接是沒法點擊的。通常狀況下的解決辦法是爲連接或按鈕添加position:relative使其相對浮動。

filter blur

CSS3中提供支持濾鏡效果的屬性filter，好比支持高斯模糊效果的blur（相似iOS7的效果）：

filter: blur(10px); -webkit-filter: blur(10px); -moz-filter: blur(10px);

IE8對filter: blur(10px)的顯示效果是對HTML元素進行小範圍的模糊處理，這個效果並非高斯模糊，要想支持高斯模糊，須要以下設置：

filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius='10');

在實踐中發現一個坑就是，全部position: relative的元素都不會生效。

其餘的發現是，IE9對filter: blur(10px)無效，而對filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius='10');是針對元素小範圍的模糊效果。

以上內容轉自：http://www.hustlzp.com/post/2014/01/ie8-compatibility

補充一些細節方面的東西：

ie8瀏覽器的模式又分爲：文本模式和標準視圖模式；其中文本模式是向下兼容ie6/7的內核來渲染頁面，因此在須要開發須要兼容ie8的web項目時，須要注意css樣式與js在ie6/7下的使用；

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。