咱們還須要兼容IE樣式問題嗎？

時間 2019-12-12

標籤咱們還須兼容樣式問題简体版

原文原文鏈接

是否還須要考慮IE的樣式兼容問題？css

這幾天研究html5boilerplate，從中學到了不少東西，其中一個就是關於舊的IE的樣式兼容問題。可是，在H5高速發展的今天，是否有必要再關注這個問題呢？先上幾張圖：html

這是有百度統計提供的最近三個月的瀏覽器以及操做系統分佈狀況，感謝百度。從圖中咱們看出，ie6的佔比還高達5%，而ie7高達4%，ie8更是高達25.3%。究其緣由，xp的在操做系統的市場佔有量依然是最高的，達到44.4%，半壁江山。可見兼容舊版本的IE的樣式仍是頗有必要的。html5

那麼，要兼顧IE的兼容性，咱們須要怎麼樣的開發方法？瀏覽器

先來講說倆種廣爲認知的方法論：併發

1.優雅降級ui

　　該方法針對現代瀏覽器來開發頁面，而對於較低版本的瀏覽器好比IE8如下則作一些兼容，保證基本功能可用。編碼

2.漸進加強spa

　　該方法基於內容來開發網頁，在保證內容完整的狀況下針對不一樣瀏覽器儘量提高網頁的用戶體驗。操作系統

如何選擇取決於網頁的側重點是否是基於內容。這裏有須要補充的是，咱們不少時候都是先在高版本的瀏覽器進行開發，而後在針對舊版本的瀏覽器進行兼容，這其實無形中增長了開發難度。若是咱們在一開始就考慮兼容性，那麼不少hacks是不須要的，並且樣式兼容基本只有ie6才須要。3d

那麼問題來了，咱們如何針對不一樣版本的IE作兼容？

1.CSS Hacks

.foo {
  color: black;
  *color: blue; /* IE7 and older */
  _color: red; /* IE6 and older */
}

使用css hacks 的問題是它的語法不能經過css驗證。

2.Conditional Stylesheets

<link rel="stylesheet" type="text/css" media="screen" href="css/style.css" />
<!--[if IE 7]><link rel="stylesheet" type="text/css" media="screen" href="css/ie7.css"  />< ![endif]-->
<!--[if IE 6]><link rel="stylesheet" type="text/css" media="screen" href="css/ie6.css"  />< ![endif]-->

這種方法雖然避免了使用css hacks致使的css 語法驗證錯誤問題，可是卻會增長http請求。要知道，ie6跟ie7只支持每一個域名下倆個併發請求。並且這樣寫會致使ie8開啓兼容模式，解決方法是增長

<meta http-equiv="x-ua-compatible" content="ie=edge">

或者在http響應頭加入（推薦）

X-UA-Compatible: IE=edge

3.<html>'s conditional classes

這個方法來自Paul Irish的文章Conditional Stylesheets vs CSS Hacks? Answer: Neither!，經過有條件的給html標籤加入特定類名來實現：

<!--[if lt IE 7]> <html class="lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>    <html class="lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>    <html class="lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class=""> <!--<![endif]-->

而後css代碼能夠這樣寫：

div.foo { color: inherit;}
.lt-ie7 div.foo { color: #ff8000;

這個方法也能夠避免css代碼語法的驗證失敗。可是會影響編碼問題問題，由於經過meta設置頁面編碼時，編碼信息必須在文檔字節流前1024個字節內。因此最好把內容編碼放在http頭部。

好了，到這裏IE樣式兼容性已經介紹的差很少了，選擇何種兼容方法仍是要取決於開發者。最後但願你們對本文可能存在的一些問題給予指正，有任何疑問你們均可以討論，謝謝。

參考：

paul Irish的Conditional Stylesheets vs CSS Hacks? Answer: Neither!

Mathias的In defense of CSS hacks — introducing 「safe CSS hacks」

相關標籤/搜索

每日一句

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