CSS Hack

*學(xué)習(xí)筆記


????CSS Hack用來解決瀏覽器的兼容性問題,為不同版本的瀏覽器定制編寫不同的css效果,使用每個人瀏覽器單獨識別的樣式代碼,控制瀏覽器的顯示樣式。

Hack分類:

????1.CSS屬性前綴法

? ? ? ? ? ? .elem{_background:?brown;}

????2.選擇器前綴法

? ? ? ? ? ? *html .elem{}

????3.IE條件注釋法

CSS屬性前綴法

????屬性前綴法是在css樣式屬性名前加一些只有特定瀏覽器才能識別的hack前綴,以達(dá)到預(yù)期效果。

????前綴標(biāo)識 ? ? ? ?兼容瀏覽器

????_ ? ? ? ? ? ? ? ? ? ? ?IE6

????+、* ? ? ? ? ? ? ? ? IE6、IE7

????\9 ? ? ? ? ? ? ? ? ? ? IE6、7、8、9

????\0 ? ? ? ? ? ? ? ? ? ? IE8、9、10、11

? ? ? ? /*?IE6?*/

????????/*?.box{width:?100px;height:?100px;background:?cadetblue;_background:?brown;}?*/

????????/*?IE?6?7?*/

????????/*?.box{width:?100px;height:?100px;background:?cadetblue;+background:?brown;}?*/

????????/*?.box{width:?100px;height:?100px;background:?cadetblue;*background:?brown;}?*/

????????/*?IE6?~?9?*/

????????/*?.box{width:?100px;height:?100px;background:?cadetblue;background:?brown\9;}?*/

????????/*?IE8~11???*/

????????/*?.box{width:?100px;height:?100px;background:?cadetblue;background:?brown\0;}?*/

選擇器前綴法

????是針對頁面表現(xiàn)不一致或者需要特殊對待的瀏覽器 ??

????前綴標(biāo)識 ? ? ? ?兼容瀏覽器

????*html ? ? ? ? ? ? ? IE6

? ? *+html ? ? ? ? ? ? IE7

? ? :root ? ? ? ? ? ? ? ?IE9以上現(xiàn)代瀏覽器

IE條件注釋法

? ? 這種方式是IE瀏覽器專有的Hack方式,微軟官方推薦使用的hack方式

????前綴標(biāo)識 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 兼容瀏覽器

? ? <!--[if IE]>...<!endif]--> ? ? ? ? ? ? ? ? ? ? 10以下所有IE(10以上不具備用注釋法)

????<!--[if IE 7]>...<!endif]--> ?? ? ? ? ? ? ? ? IE7

????<!--[if lte IE 7]>...<!endif]--> ?? ? ? ? ? ?IE7以下 (以上 是gte)

????<!--[if ! IE 7]>...<!endif]--> ?? ? ? ? ? ? ? 非?IE7

寫法:

??????<style>

?????????.box{width:?100px;height:?100px;background:?cadetblue;}

????????</style>

??????<!--[if?IE]>??????

????????????<div?class="box"></div>

???????<!endif]-->?

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

友情鏈接更多精彩內(nèi)容