CSS hack
由于不同瀏覽器對CSS的解析認識不完全一樣，因此會導致生成的頁面效果不一樣，得不到我們所需要的頁面效果。此時，我們需要針對不同的瀏覽器寫不同的CSS，讓它能在不同的瀏覽器中也能得到我們想要的頁面效果
-
表現形式
- 屬性前綴法（類內部Hack）：例如 IE6能識別下劃線“”和星號“”，IE7能識別星號“”，但不能識別下劃線“”，IE6~IE10都能識別“\9”，但 Firefox 對之前提到的三個都不能識別
- 選擇器前綴法（選擇器Hack）
- IE條件注釋法（HTML條件注釋Hack）：
- 針對IE10之前的版本（IE10+不再支持條件注釋）
<!--[if IE]>IE瀏覽器顯示的內容 <![endif]--> - IE6及以下
<!--[if lt IE 6]>只在IE6-顯示的內容 <![endif]-->
- 針對IE10之前的版本（IE10+不再支持條件注釋）
示例
.box{ color: red; _color: blue; /*ie6*/ *color: pink; /*ie7*/ color: yellow\9; /*ie/ed*/ } <!--[if IE 7]> <link rel="stylesheet" href="ie7.css" type="text/css" /> <![end if]-->
瀏覽器兼容的思路
-
要不要做（為什么）
- 產品的角度（產品的受眾、受眾的瀏覽器比例、效果優先還是基本功能優先）
- 成本的角度（有無必要做某件事）
-
做到什么程度
- 讓哪些瀏覽器支持哪些效果
-
如何做
- 根據兼容需求選擇支持哪些技術框架/庫（jQuery）
- 根據兼容需求選擇兼容工具（html5shiv.js、respond.js、css reset、normalize.css、Modernizr）
- postCSS
- 條件注釋、CSS Hack、js 能力檢測做一些修補
常見的需要兼容的屬性
-
inline-blockIE8+ -
min-width/min-heightIE8+ -
:before, :afterIE8+ -
div:hoverIE7+ -
background-sizeIE9+ -
border-radiusIE9+ -
box-shadowIE9+ -
動畫、漸變IE10+
示例
.clearfix:after{
content: '';
display: block;
clear: both;
}
.clearfix{
*zoom: 1; /* 僅對IE6 7有效 */
}
.target{
display: inline-block;
*display: inline;
*zoom: 1;
}
名詞解釋
- 條件注釋：HTML代碼中被IE有條件解釋的語句
- IE Hack：使用特定的符號或者方式使得特定的IE瀏覽器展示特定的效果
- js 能力檢測：使用js檢測瀏覽器支持的屬性，以便編寫樣式展示效果
- html5shiv.js IE6~8無法識別HTML5提出的新元素，這些新元素不能作為父節點包裹子元素，并且不能應用CSS樣式，html5shiv執行createElement方法使css樣式應用在未知元素上
- respond.js 可在IE6~8上模擬CSS3的媒體查詢Media queries
- css reset 強制重置元素的默認樣式，使頁面在所有瀏覽器下效果一致
- normalize.css 強制重置元素默認樣式的同時，保護有用的瀏覽器默認樣式、提供一般化的樣式、修復瀏覽器自身的bug、優化CSS可用性、解釋代碼
- Modernizr 檢查瀏覽器是否支持 CSS3 或者 HTML5 的特性而自動添加一些類名（class）到 <html> ，并替換掉原來的 .no-js
- postCSS 使用JavaScript插件來轉換CSS的工具，負責把CSS代碼解析成抽象語法樹結構（Abstract Syntax Tree,AST）, 再交由插件來進行處理
