一、什么是CSS hack
由于市場上的各大瀏覽器廠商使用的瀏覽器內(nèi)核不同，導(dǎo)致對于一些CSS樣式有著不同的支持程度和解析方法。為了解決這些誤差，采取不同的CSS樣式設(shè)置來解決這些問題，讓頁面能同時(shí)減兼容不同的瀏覽器。這樣就叫做CSS hack。
二、談一談瀏覽器兼容的思路
第一、清楚自己所寫產(chǎn)品的受眾是誰，他們使用各瀏覽器的比例是多少。
第二、兼容哪些瀏覽器，放棄哪些瀏覽器。
第三、在兼容性不同的瀏覽器上，哪些需要做到精美，哪些只需基本功能，考慮實(shí)現(xiàn)效果的成本和回報(bào)。
第四、根據(jù)兼容需求選擇技術(shù)庫和框架，根據(jù)兼容需求選擇相應(yīng)的兼容工具。
合適的框架：
- Bootstrap (>=ie8)
- jQuery 1.~ (>=ie6), jQuery 2.~ (>=ie9)
- Vue (>= ie9)
三、列舉5種以上瀏覽器兼容的寫法
條件注釋（IE10不支持條件注釋）
<!--[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]-->
項(xiàng)目 范例 說明
！ [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
屬性選擇器
.box{
color: green;
_color: red; /*ie6*/
*color: yellow; /*ie67*/
color: blue\9; /*ie/edge 6-8*/
}
選擇器前綴
*html *前綴只對IE6生效
*+html *+前綴只對IE7生效
@media screen\9{...}只對IE6/7生效
@media \0screen {body { background: red; }}只對IE8有效
@media \0screen\,screen\9{body { background: blue; }}只對IE6/7/8有效
@media screen\0 {body { background: green; }} 只對IE8/9/10有效
@media screen and (min-width:0\0) {body { background: gray; }} 只對IE9/10有效
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {body { background: orange; }} 只對IE10有效
使用Modernizr工具。
四、以下工具/名詞是做什么的
- 條件注釋
條件注釋是IE5到IE9中HTML里一個(gè)特殊的解釋語句。用于判斷IE瀏覽器版本。且這些判斷不是在腳本里執(zhí)行的，而是直接在HTML代碼中執(zhí)行的。
- IE Hack
針對不同版本瀏覽器，編寫對應(yīng)的CSS，讓其能正常渲染頁面。 - js 能力檢測
檢測該瀏覽器是否支持某一特定能力。 - html5shiv.js
用于解決IE9以下版本不能對HTML5新增標(biāo)簽進(jìn)行支持，導(dǎo)致CSS無法作用。 - respond.js
respond.js可以為IE6-IE8以及其他不支持CSS3媒體查詢功能的瀏覽器提供媒體查詢的min-width和max-width特性，實(shí)現(xiàn)響應(yīng)式布局。 - css reset
將瀏覽器的默認(rèn)樣式全部重新定義。 - normalize.css
normalize.css是一個(gè)可定制的CSS文件，它讓不同的瀏覽器在渲染網(wǎng)頁的時(shí)候更加統(tǒng)一。 - Modernizr
Modernizer可以使得更加方便的為各種情況編寫JS和CSS，無論瀏覽器是否支持。
Modernizr 會在頁面加載后立即檢測特性；然后創(chuàng)建一個(gè)包含檢測結(jié)果的 JavaScript 對象，同時(shí)在 html 元素加入方便你調(diào)整 CSS 的 class 名。 - postCSS
它使用 JavaScript 代碼來轉(zhuǎn)換 CSS 中的樣式。PostCSS 的插件可以完成各種不同的功能。
