1、什么是 CSS hack
根據(jù)百度定義：SS hack由于不同廠商的瀏覽器，比如Internet Explorer,Safari,Mozilla Firefox,Chrome等，或者是同一廠商的瀏覽器的不同版本，如IE6和IE7，對CSS的解析認識不完全一樣，因此會導致生成的頁面效果不一樣，得不到我們所需要的頁面效果。 這個時候我們就需要針對不同的瀏覽器去寫不同的CSS，讓它能夠同時兼容不同的瀏覽器，能在不同的瀏覽器中也能得到我們想要的頁面效果。
簡單的說就是利用瀏覽器漏洞，使css兼容不同的瀏覽器版本。
共有3種方式：CSS屬性前綴法、選擇器前綴法以及IE條件注釋法（即HTML頭部引用if IE）Hack，實際項目中CSS Hack大部分是針對IE瀏覽器不同版本之間的表現(xiàn)差異而引入的。
- 屬性前綴法(即類內(nèi)部Hack)：例如 IE6能識別下劃線"_"和星號" * "，IE7能識別星號" * "，但不能識別下劃線"_"，IE6~IE10都認識"\9"，但firefox前述三個都不能認識
.box{
color: red;
_color: blue; /*ie6*/
*color: pink; /*ie67*/
color: yellow\9; /*ie/edge 6-8*/
}
- 選擇器前綴法(即選擇器Hack)
比如IE6能識別*html .class{}，IE7能識別*+html .class{}或者*:first-child+html .class{}。 - IE條件注釋法(即HTML條件注釋Hack)：針對所有IE(注：IE10+已經(jīng)不再支持條件注釋)： ，針對IE6及以下版本：。這類Hack不僅對CSS生效，對寫在判斷語句里面的所有代碼都會生效
<!–-[if IE 7]>
<link rel="stylesheet" href="ie7.css" type="text/css" />
<![endif]–->
2、談一談瀏覽器兼容的思路
要不要做
產(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 能力檢測做一些修補
3、列舉5種以上瀏覽器兼容的寫法
- 合適的框架
Bootstrap (>=ie8)
jQuery 1.~ (>=ie6), jQuery 2.~ (>=ie9)
Vue (>= ie9)
... - (IE)條件注釋
條件注釋 (conditional comment) 是于HTML源碼中被IE有條件解釋的語句。條件注釋可被用來向IE提供及隱藏代碼。
<!--[if lt IE 9]>
這段文字只在版本小于IE9瀏覽器顯示
<![endif]-->
- 屬性前綴法
.box{
color: red;
_color: blue; /*ie6*/
*color: pink; /*ie6、7*/
}
- 選擇器前綴法
div{
width:500px;
height:500px;
color:blue;
}
div\9{
color:yellow;
}
- 使用兼容工具：
- html5shiv.js：在IE6~8（不支持html5標簽）上模擬html5標簽
- respond.js：在IE6~8（不支持css3）上模擬CSS3 Media Queries
- CSS Reset和Normalize.css
- Modernizr.js：為瀏覽器的html標簽生成一批的css的class名稱，標記當前瀏覽器支持和不支持的特性。利用html標簽上的類名，就可以為不同版本的不同瀏覽器添加兼容樣式。
4、以下工具/名詞是做什么的
- 條件注釋
1、條件注釋 (conditional comment) 是于HTML源碼中被IE有條件解釋的語句。條件注釋可被用來向IE提供及隱藏代碼。
2、使用了條件注釋的頁面在 Windows Internet Explorer 9 中可正常工作，但在 Internet Explorer 10 中無法正常工作。 IE10不再支持條件注釋
3、通常指的是IE條件注釋，利用IE6~9的漏洞做IE低版本兼容，如
針對IE6及以下版本：
<!--[if lt IE 6]>只在IE6-顯示的內(nèi)容 <![endif]-->
IE Hack
指的是IE瀏覽器漏洞，利用IE Hack，可以兼容IE低版本js 能力檢測
檢測當前瀏覽器支持和不支持的特性。如Modernizr.js,它會為瀏覽器的html標簽生成一批的css的class名稱，標記當前瀏覽器支持和不支持的特性。我們利用html標簽上的類名，就可以為不同版本的不同瀏覽器添加兼容樣式html5shiv.js
是一種css兼容工具。可在IE6~8（不支持html5標簽）上模擬html5標簽respond.js
Respond.js 是一個快速、輕量的 polyfill，用于為 IE6-8 以及其它不支持 CSS3 Media Queries 的瀏覽器提供媒體查詢的 min-width 和 max-width特性，實現(xiàn)響應(yīng)式網(wǎng)頁設(shè)計css reset
強制重置瀏覽器默認樣式。使得所有瀏覽器渲染頁面效果一致。但存在性能問題normalize.css
在默認的HTML元素樣式上提供了跨瀏覽器的高度一致性。Modernizr
是一種css兼容工具。他會為瀏覽器的html標簽生成一批的css的class名稱，標記當前瀏覽器支持和不支持的特性。我們利用html標簽上的類名，就可以為不同版本的不同瀏覽器添加兼容樣式postCSS
是一個基于JS插件的轉(zhuǎn)換樣式的工具。目標是通過自定義插件和工具這樣的生態(tài)系統(tǒng)來改造CSS。PostCSS把擴展的語法和特性轉(zhuǎn)換成現(xiàn)代的瀏覽器友好的CSS。
