IE8兼容性經驗小結

時間 2019-11-17

原文原文鏈接

DOCTYPEhtml

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

1.對標記,attributes,properties的約束規則jquery

2.對瀏覽器的渲染模式產生影響，不一樣的渲染模式會影響到瀏覽器對於CSS代碼甚至JavaScript腳本的解析web

DOCTYPE是很是關鍵的，目前的最佳時間就是在HTML文檔的首行鍵入chrome

<!DOCTYPE html>

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

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

<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內核來渲染。佈局

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

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

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

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

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

Media Query

IE8彷佛沒法識別Media Query，因此須要hack一下。
實現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中倒是能夠的，經查詢發現不奏效，而在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

last-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

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.Mucrosoft.Blur(PixelRadius='10');是針對元素小範圍模糊的模糊效果

相關標籤/搜索

每日一句

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