2. 程式人生 > >(轉載)IE8+相容經驗小結

(轉載)IE8+相容經驗小結

阿新 • • 發佈：2019-01-16

本文分享下我在專案中積累的IE8+相容性問題的解決方法。根據我的實踐經驗，如果你在寫HTML/CSS時候是按照W3C推薦的方式寫的，然後下面的幾點都關注過，那麼基本上很大一部分IE8+相容性問題都OK了（這裡的IE8+主要是指IE8，據個人目測，IE9+的渲染效果已經非常好了）。

前期準備

測試IE相容性必須要在Windows中測，而且是Win7+，因為WinXP最高只支援IE8，IE9就呵呵啦！大部分做Web的童鞋都不是使用Windows做為開發環境，要麼是Linux發行版，要麼是Mac OS。怎麼辦？一般有2種方法：

  • 開Windows虛擬機器
  • 將開發環境暫時切換到Windows

如果你的機器足夠快，我推薦前一種方式。但如果機器不行，開虛擬機器就會很卡。如果你是Pythonista，我之前寫的一篇日誌《在Windows中搭建Python Web開發環境》可能會對你有點用處。

我覺得可以把精力集中在這幾個瀏覽器上：IETester（IE8-IE9）、360瀏覽器、搜狗瀏覽器、Chrome。IETester測完了建議再用真實的IE8、IE9過一遍，以防萬一。

DOCTYPE

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

  • 對標記、attributes 、properties的約束規則
  • 對瀏覽器的渲染模式產生影響，不同的渲染模式會影響到瀏覽器對於CSS 程式碼甚至 JavaScript 指令碼的解析

DOCTYPE是非常關鍵的，目前的最佳實踐就是在HTML文件的首行鍵入：

<!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核心來渲染。關於此meta標籤的具體說明，可參見StackOverflow上的精彩回答。

國記憶體在很多雙核瀏覽器比如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一下啦！推薦採用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');是針對元素小範圍的模糊效果。

好了，目前來說我所遇到的IE8+相容性問題就這些啦。前端和後端我都做一點，這樣的好處在於一個人能夠獨立開發網站，壞處就是各方面都不精。如果你有蠻重要的補充，或者更好的解決方法，歡迎告訴我！

原文連結：http://www.hustlzp.com/post/2014/01/ie8-compatibility

相關推薦

(轉載)IE8+相容經驗小結

本文分享下我在專案中積累的IE8+相容性問題的解決方法。根據我的實踐經驗，如果你在寫HTML/CSS時候是按照W3C推薦的方式寫的，然後下面的幾點都關注過，那麼基本上很大一部分IE8+相容性問題都OK了（這裡的IE8+主要是指IE8，據個人目測，IE9+的渲染效果已經非常好了）。 前期準備 測試IE相容性

excel打開csv 出現亂碼怎麽解決（轉載百度經驗）

初學者 環境 文件 先來 pad 編碼 -i width 打開 http://jingyan.baidu.com/article/ac6a9a5e4c681b2b653eacf1.html CSV是逗號分隔值的英文縮寫，通常都是純文本文件。CSV格式是分隔的數據格式，有

1300多萬條數據30G論壇大數據優化實戰經驗小結

用戶反饋 文章 千萬 身體 分析器 png 監視 重點 border 最近由於某大型網站社區論壇運行效率比較低用戶反饋論壇有些卡需要對系統進行優化，論壇性能影響了公司的形象還有網站的流量，當然這也會影響到公司的收入，而且後期還需要長期維護網站的社區論壇服務。 1：

ie8相容問題

input標籤placeholder 1.input裡面的placeholder屬性，在pc端用的特別好，但是萬惡的ie8,placeholder竟然不支援。於是找到一種方法解決在ie8中placeholder無效的事 $(function() { // 如果不支援placeholder

wampp安裝教程（轉載百度經驗）

 下載官網安裝包 雙擊已下載的XAMPP安裝包，啟動安裝程式。當出現“Bitnami”安裝介面之後，如果你的電腦中安裝有防毒軟體，它會彈出一個詢問框，告知“防毒軟體可能會拖慢安裝程式的提示框”，不用管它，直接點選“Yes按鈕”確定繼續安裝。緊接著，

border-radius IE8相容處理

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compat

AsyncTask經驗小結

1. AsyncTask物件的建立程式碼必須在主執行緒中呼叫; 2. 直接new AsyncTask物件可能導致記憶體洩漏; 3. execute方法必須在主執行緒中呼叫; 4. execute方

mysql索引經驗小結

mysql索引分析對於開發人員是非常有必要的，充分理解mysql的查詢索引機制，才能寫出高效穩定的應用程式。這裡記錄下，平時的mysql索引使用經驗小結，方便以後生疏了再來回顧。 測試版本5.7.16 !=是否走索引 網上的部分文章說，都有說逆向查詢條件不走索引，但是本

【轉載】Hyperledger學習小結

Hyperledger學習小結   自學Hyperledger Composer也有段時間了，是時候對所學的知識總結一下了。因為沒有實際專案參與的話，差不多也就到此為止了。後續可能會去了解一下以太坊的技術實踐。所以在這之前，有必要對之前掌握的內容做一下小結，整理下整個Hyperle

【心得】Lattice後端使用經驗小結（ECP5UM，DDR3，Diamond3.10，Reveal邏輯分析）

列表 con inf 很難 http type ner jta psc 【博客導航】　【導航】FPGA相關 DDR3 IP例化 LEF5UM器件，應用DDR3控制器IP。主要分幾步：IP獲取，安裝，例化。 1、先在impl1目錄下，右鍵，新建sbx文件，即Clarit

Android平臺移植經驗小結

Android Studio使用經驗 快捷鍵 去某行 Ctrl+G 回到上一編輯位置 View | Toolbar duplicates當前行或選中塊 Ctrl+D 特性 Project頁面，便於檢視生成的

關於IE7 IE8相容HTML5和CSS3的一種解決方案

 今天突然發現一網站用JS來實現這個支援 新增到head裡 <!--[if IE 7]> <script type='text/javascript' src='js/excanvas.js'></script> <link rel

支付寶手機網站支付介面整合的經驗小結

1.申請企業賬號：我們需要一個企業賬號； 4.下載並解壓後的資料夾結構： 5.選擇java開發的測試包，進去之後根據readme.txt文件說明進行引數配置即可測試了（測試包中的伺服器非同步通知頁面路徑和頁面跳轉同步通知頁面路徑在測試時可以不用配置）； 幾個重要引數

Android學習之騰訊互動直播開發經驗小結

最近外派到XXX公司做一個帶直播功能的pad專案，整合的是騰訊的互動直播，今天寫了一下經驗小結，方便以後使用。 互動直播整合流程： 1：需要到騰訊雲直播平臺下載SDK，注意點，現在騰訊SDK的下載需要經過實名制認證的賬戶才具有下載資格許可權，只有通過騰訊資格

Vue使用經驗小結

目錄 1. 元件宣告問題 2. 元件註冊時無法訪問vue例項的data資料 3. computed和methods 4. 資料驅動 5. 待續 1.元件宣告問題 先說問題 ：區域性註冊了三個元件，但是元件<p-item>

在JAVA中使用文件物件模型DOM經驗小結

文件物件模型 (DOM) 是一個文件標準，對於完備的文件和複雜的應用程式，DOM 提供了大量靈活性。DOM標準是標準的。它很強壯且完整，並且有許多實現。這是許多大型安裝的決定因素--特別是對產品應用程式，以避免在API發生改變時進行大量的改寫。以上是我在選擇處理XML資料時之

時間序列預測問題中特徵工程和訓練的經驗小結

        鑑於影象的語義分析需求已經不再侷限於常規的單幀影象，視訊語義分析的地位日漸重要。初步考慮，幀與幀之間依靠時間維度進行銜接，或許需要適當研究基礎的LSTM與RNN結構。特徵工程/訓練:        許多大資料工程師都認為，預測任務中80%的時間用來做特徵工程，

mybatis 使用經驗小結

一、多資料來源問題 主要思路是把dataSource、sqlSesstionFactory、MapperScannerConfigurer在配置中區分開，各Mapper對應的包名、類名區分開 1 <?xml version="1.0" encoding="UTF-8"?> 2 <

使用 Anthem.NET 的經驗小結

1. 不依靠 Panel 來做省事的區域性 Ajax.2. 控制元件不要圖偷懶設定 AutoUpdateAfterCallBack = true. 而是每次需要更新的時候指定 UpdateAfterCallBack = true. 可以大幅度降低除錯難度。先寫一點，想起

protobuf使用經驗小結

proto檔案本身是按照層次結構組織的 巢狀結構的proto編譯方法： $ ./protoc --proto_path=proto_src_dir --cpp_out=proto_generate