什么是 CSS hack
由于不同廠商的瀏覽器，比如Internet Explorer,Safari,Mozilla Firefox,Chrome等岭皂，或者是同一廠商的瀏覽器的不同版本，如IE6和IE7叫胁，對CSS的解析認識不完全一樣亡问，因此會導(dǎo)致生成的頁面效果不一樣，得不到我們所需要的頁面效果引瀑。
這個時候我們就需要針對不同的瀏覽器去寫不同的CSS狂芋，讓它能在不同的瀏覽器中也能得到我們想要的頁面效果。
談一談瀏覽器兼容的思路
要不要做:
產(chǎn)品的角度（產(chǎn)品的受眾憨栽、受眾的瀏覽器比例帜矾、效果優(yōu)先還是基本功能優(yōu)先）
成本的角度 (有無必要做某件事)做到什么程度:
讓哪些瀏覽器支持哪些效果如何做:
根據(jù)兼容需求選擇技術(shù)框架/庫(jquery)
根據(jù)兼容需求選擇兼容工具(html5shiv.js翼虫、respond.js、css reset屡萤、normalize.css珍剑、Modernizr、postCSS)
條件注釋死陆、CSS Hack招拙、js 能力檢測做一些修補
列舉5種以上瀏覽器兼容的寫法
- 注釋法
<!--[if IE 6]>
<p>You are using Internet Explorer 6.</p>
<![endif]-->
- IE Hack法
.box{
color: red;
_color: blue; /*ie6*/
*color: pink; /*ie67*/
color: yellow\9; /*ie/edge 6-8*/
}
- 兼容清除浮動
.clearfix{
content: " ";
display: block;
clear: both;
}
.clearfix{
*zoom: 1; //for ie6,7
}
- ie 67的inline-block
.target{
display: inline-block;
*display: inline;
*zoom: 1;
}
- 利用插件提高兼容
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
以下工具/名詞是做什么的
- 條件注釋
<!--[if IE 6]>
<p>You are using Internet Explorer 6.</p>
<![endif]-->
<!--[if !IE]><!-->
<script>alert(1);</script>
<!--<![endif]-->
<!--[if IE 8]>
<link href="ie8only.css" rel="stylesheet">
<![endif]-->
| 項目 | 范例 | 說明 |
|---|---|---|
| ！ | [if !IE] | 非IE |
| lt | [if lt IE 5.5] | 小于IE 5.5 |
| lte | [if lte IE 6] | 小于等于IE6 |
| gt | [if gt IE 5] | 大于 IE5 |
| gte | [if gte IE 7] | 大于等于IE7 |
| | | [if (IE 6)|(IE 7)] | IE6或者IE7 |
指于HTML源碼中被IE有條件解釋的語句措译。條件注釋可被用來向IE提供及隱藏代碼别凤。
- IE Hack
.box{
color: red;
_color: blue; /*ie6*/
*color: pink; /*ie67*/
color: yellow\9; /*ie/edge 6-8*/
}
針對ie的css hack
- js 能力檢測
檢測是否有這個屬性,方法沒有就用另外一種方式獲取這個
通常直接用jquery來達到這個目的。 - html5shiv.js
讓一些自身不支持html5標簽的瀏覽器支持html5领虹。具體方式是使用createElement()來創(chuàng)建標簽规哪。 - respond.js
為了響應(yīng)式的頁面，為ie6／7／8模擬css3的媒體查詢塌衰。 - css reset
為瀏覽器自身有默認的樣式由缆，如padding和margin等， 不方便我們使用猾蒂，所以我們要重置這些屬性均唉，如將margin設(shè)為0，字體設(shè)置為xx等等肚菠。暴力清除舔箭。 - normalize.css
上面一個的進化版本，保護了有用的瀏覽器默認樣式蚊逢。 - Modernizr
探測用戶瀏覽器html5和css3的一些特性层扶，根據(jù)用戶瀏覽器是否支持這些特性來向html元素中添加不同的class。 - postCSS
PostCSS 是一個允許使用 JS 插件轉(zhuǎn)換樣式的工具烙荷。 這些插件可以檢查（lint）你的 CSS镜会，支持 CSS Variables 和 Mixins， 編譯尚未被瀏覽器廣泛支持的先進的 CSS 語法终抽，內(nèi)聯(lián)圖片戳表，以及其它很多優(yōu)秀的功能。PostCSS的目標是通過自定義插件和工具這樣的生態(tài)系統(tǒng)來改造CSS昼伴。與Sass和Less這些預(yù)編譯器相同的原則匾旭，PostCSS把擴展的語法和特性轉(zhuǎn)換成現(xiàn)代的瀏覽器友好的CSS。
