什么是 CSS hack
CSS hack指瀏覽器各版本之間對(duì)CSS解析后展現(xiàn)的效果不一樣，針對(duì)不同的瀏覽器去寫不同的CSS，讓它能夠同時(shí)兼容不同的瀏覽器，能在不同的瀏覽器中也能得到我們想要的頁(yè)面效果就叫作CSS Hack。
談一談瀏覽器兼容的思路
- 產(chǎn)品的需求（實(shí)用于哪些用戶、瀏覽器比例、效果優(yōu)先還是基本功能優(yōu)先）
- 做到什么程度（讓哪些瀏覽器支持哪些效果）
- 根據(jù)兼容需求選擇兼容工具
html5shiv.js、respond.js、css reset、normalize.css、Modernizr、postCSS - 根據(jù)兼容需求選擇技術(shù)框架
比如：Bootstrap(>=ie8);jQuery 1.~ (>=ie6), jQuery 2.~ (>=ie9);Vue (>= ie9) - 條件注釋、CSS Hack、js 能力檢測(cè)做一些修補(bǔ)
列舉5種以上瀏覽器兼容的寫法
- 合適的框架
Bootstrap (>=ie8)
jQuery 1.~ (>=ie6), jQuery 2.~ (>=ie9)
Vue (>= ie9)
- 條件注釋 (conditional comment) 是于HTML源碼中被IE有條件解釋的語句。條件注釋可被用來向IE提供及隱藏代碼。
<!--[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]-->
- CSS屬性前綴法
.box {
color: red;
_color: blue; /*ie6*/
*color: pink; /*ie67*/
color: yellow\9; /*ie/edge 6-8*/
}
- CSS塊級(jí)兼容
.target{
display: inline-block;
*display: inline;
*zoom: 1;
}
- 清除浮動(dòng)
.clearfix:after {
content: '';
display: block;
clear: both;
}
.clearfix {
*zoom: 1; /* 僅對(duì)ie67有效 */
}
以下工具/名詞是做什么的
- 條件注釋
是于HTML源碼中被IE有條件解釋的語句，條件注釋可被用來向IE提供及隱藏代碼，IE10不再支持條件注釋 - IE Hack
針對(duì)IE瀏覽器編寫不同的CSS的讓IE能夠正常渲染的過程，使用CSS屬性前綴法、選擇器前綴法以及IE條件注釋法 - js 能力檢測(cè)
檢測(cè)瀏覽器是否支持特定的能力，就可以給出特定的解決方案 - html5shiv.js
解決IE9以下版本瀏覽器對(duì)HTML5新增標(biāo)簽不識(shí)別，并導(dǎo)致CSS不起作用的問題 - respond.js
respond.js 是一個(gè)小腳本，用于為 IE6-8 以及其它不支持 CSS3 媒體查詢功能的瀏覽器提供媒體查詢的 min-width 和 max-width 特性，實(shí)現(xiàn)響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì) - css reset
將瀏覽器的默認(rèn)樣式全部去掉，更準(zhǔn)確說就是通過重新定義標(biāo)簽樣式 - normalize.css
Normalize.css 是一個(gè)可以定制的CSS文件，它讓不同的瀏覽器在渲染網(wǎng)頁(yè)元素的時(shí)候形式更統(tǒng)一 - Modernizr
Modernizr 使你可以方便地為各種情況編寫 JavaScript 和 CSS，無論瀏覽器是否支持這些特性。這是處理漸進(jìn)增強(qiáng)的完美方案
Modernizr 會(huì)在頁(yè)面加載后立即檢測(cè)特性；然后創(chuàng)建一個(gè)包含檢測(cè)結(jié)果的 JavaScript 對(duì)象，同時(shí)在 html 元素加入方便你調(diào)整 CSS 的 class 名 - postCSS
PostCSS是一個(gè)JS插件轉(zhuǎn)換樣式表的工具。這些插件能夠檢驗(yàn)?zāi)愕腃SS、支持變量和混合，轉(zhuǎn)化css3的新特性語法、行內(nèi)圖片等
