-
什么是 CSS hack
由于不同廠商的瀏覽器侦铜，比如Internet Explorer,Safari,Mozilla Firefox,Chrome等媒抠，或者是同一廠商的瀏覽器的不同版本浇冰，如IE6和IE7殊霞，對(duì)CSS的解析認(rèn)識(shí)不完全一樣畸悬，因此會(huì)導(dǎo)致生成的頁(yè)面效果不一樣，得不到我們所需要的頁(yè)面效果灾部。這個(gè)時(shí)候我們就需要針對(duì)不同的瀏覽器去寫(xiě)不同的CSS康铭，讓它能在不同的瀏覽器中也能得到我們想要的頁(yè)面效果，這個(gè)就叫CSS hack赌髓。
-
談一談瀏覽器兼容的思路
就是當(dāng)你做一款產(chǎn)品時(shí)从藤，你就要考慮這個(gè)網(wǎng)站是不是要做瀏覽器的兼容，如果需要做兼容的話锁蠕，它到底要兼容到ie幾（因?yàn)橐话銇?lái)說(shuō)pc網(wǎng)站的兼容就是ie瀏覽器夷野，國(guó)產(chǎn)瀏覽器就是chrome和ie內(nèi)核，而firefoxs及其他的瀏覽器會(huì)自動(dòng)升級(jí)就相當(dāng)于它是最新的）荣倾。
如果要兼容的話悯搔，如果去做？
-
要不要做
- 產(chǎn)品的角度（產(chǎn)品的受眾舌仍、受眾的瀏覽器比例妒貌、效果優(yōu)先還是基本功能優(yōu)先）
- 成本的角度（有無(wú)必要做某件事）
-
做到什么程度
- 讓哪些瀏覽器支持哪些效果
如何做
根據(jù)兼容需求選擇技術(shù)框架/庫(kù)（jquery）
根據(jù)兼容需求選擇兼容工具（html5shiv.js、respond.js抡笼、css reset苏揣、normalize.css、Modernizr）
條件注釋推姻、CSS Hack、is能力檢測(cè)做一些修補(bǔ)
-
列舉5種以上瀏覽器兼容的處理細(xì)節(jié)
- 雙倍邊距
如果你有一個(gè)分配有左/右邊距的浮動(dòng)元素框沟，IE6會(huì)使得邊距雙倍化藏古。比如，margin-left: 5px忍燥；將會(huì)變成10px拧晕。
可以通過(guò)對(duì)浮動(dòng)元素添加display:inline來(lái)解決這個(gè)問(wèn)題
div#content {
float:left;
width:200px;
margin-left:10px;
display:inline;
}
- IE的最小高度
IE忽略min-height屬性，可以用下面的hack來(lái)修復(fù)它梅垄。
selector {
min-height:500px;
height:auto !important;
height:500px;
}
- 禁用IE默認(rèn)的垂直滾動(dòng)條
默認(rèn)情況下厂捞，即使內(nèi)容適合窗口大小，IE6 和 IE7也會(huì)顯示垂直滾動(dòng)條队丝∶夷伲可以使用overflow:auto，讓滾動(dòng)條只在你需要時(shí)出現(xiàn)机久。
html {
overflow: auto;
}
- IE6臭墨、IE7兼容inline-block
.target{
display: inline-block;
*display: inline;
*zoom: 1;
}
- 清除浮動(dòng)
.clearfix:after{
content: ' ';
display: block;
clear: both;
}
.clearfix{
*zoom: 1; /* 僅對(duì)ie67有效 */
}
-
以下工具/名詞是做什么的
條件注釋
條件注釋?zhuān)╟onditional comment）是于HTML源碼中被IE有條件解釋的語(yǔ)句。條件注釋可被用來(lái)向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]-->
使用了條件注釋的頁(yè)面在Windows Internet Explore 9 中可正常工作胧弛，但是在Internet 10 中無(wú)法正常工作尤误。IE10不再支持條件注釋
- IE Hack
通過(guò)CSS屬性前綴法、選擇器前綴法以及IE條件注釋法寫(xiě)只有IE瀏覽器能識(shí)別的css樣式结缚。
例子：
.box{
color: red;
_color: blue; /*ie6*/
*color: pink; /*ie67*/
color: yellow\9; /*ie/edge 6-8*/
}
js 能力檢測(cè)
就是看瀏覽器是否支持當(dāng)前對(duì)象的屬性或是方法损晤，先通過(guò)獲得頁(yè)面文本內(nèi)容的方式來(lái)了解兼容性，并封裝函數(shù)或?qū)ο笠越鉀Q此類(lèi)問(wèn)題红竭。html5shiv.js
用于解決IE9以下版本瀏覽器對(duì)HTML5新增標(biāo)簽不識(shí)別尤勋，并導(dǎo)致CSS不起作用的問(wèn)題。respond.js
Respond.js 是一個(gè)快速德崭、輕量的 polyfill（用于實(shí)現(xiàn)瀏覽器并不支持的原生API的代碼斥黑。），用于為 IE6-8 以及其它不支持 CSS3 Media Queries 的瀏覽器提供媒體查詢(xún)的 min-width 和 max-width 特性眉厨，實(shí)現(xiàn)響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)锌奴。（讓IE6-8支持CSS3 Media Query）css reset
每個(gè)瀏覽器都有一些自帶的或者共有的默認(rèn)樣式，會(huì)造成一些布局上的困擾憾股，css reset的作用就是重置這些默認(rèn)樣式鹿蜀，使樣式表現(xiàn)一致，比如*{margin:0;padding:0}就是一個(gè)最簡(jiǎn)單的css reset服球。normalize.css
Normalize.css 是一個(gè)可以定制的CSS文件茴恰，它讓不同的瀏覽器在渲染網(wǎng)頁(yè)元素的時(shí)候形式更統(tǒng)一。
參考Modernizr
Modernizr是一個(gè)開(kāi)源的JS庫(kù)斩熊，它使得那些基于訪客瀏覽器的不同（指對(duì)新標(biāo)準(zhǔn)支持性的差異）而開(kāi)發(fā)不同級(jí)別體驗(yàn)的設(shè)計(jì)師的工作變得更為簡(jiǎn)單往枣。它使得設(shè)計(jì)師可以在支持HTML5和CSS3的瀏覽器中充分利用HTML5和CSS3的特性進(jìn)行開(kāi)發(fā)，同時(shí)又不會(huì)犧牲其他不支持這些新技術(shù)的瀏覽器的控制粉渠。
參考1
參考2postCSS
它可以被理解為一個(gè)平臺(tái)分冈，可以讓一些插件在上面跑
它提供了一個(gè)解析器，可以將CSS解析成抽象語(yǔ)法樹(shù)
通過(guò)PostCSS這個(gè)平臺(tái)霸株，我們能夠開(kāi)發(fā)一些插件雕沉，來(lái)處理CSS。熱門(mén)插件如autoprefixer
參考1
參考2
文章著作權(quán)歸饑人谷_sunny和饑人谷所有去件，轉(zhuǎn)載須說(shuō)明來(lái)源
