CSS hack整理

時間 2019-12-01

標籤 css hack 整理欄目 CSS 简体版

原文原文鏈接

瀏覽器的兼容性一直是個頭疼的問題，使用「欺騙」技術可以使各個瀏覽器效果一致，花了些時間整理了各個瀏覽器的HACK，主要包括IE系列和最新版本的Chrome、Safari、Firefox、 Opera，比較全面的記錄下Hack，內容包括3部分：媒體查詢 hack、屬性Hack、選擇器Hack，這些Hack已經測試並獲得有效運用，有須要的同窗能夠放心使用，筆者會在之後不斷的更新，若是有須要補充或者修改的，歡迎你們指教！css

如下代碼之間的空格是必要的，缺乏空格致使失效html

/*---------------------------------媒體查詢hack [[---------------------------------*/web

/* 只支持IE六、7 */瀏覽器

@media screen\9 {...}測試

/* 只支持IE8 */url

@media \0screen {...}spa

/* 只支持IE六、七、8 */code

@media \0screen\,screen\9 {...}htm

/* 只支持IE八、九、10 */blog

@media screen\0 {...}

/* 只支持IE九、10 */

@media screen and (min-width:0\0) {...}

/* 只支持IE10 */

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {...}

/* 支持IE九、Chrome、Safari、Firefox、 Opera */

@media all and (min-width:0){...}

/* 只支持wekit內核瀏覽器Chrome、Safari */

@media screen and (-webkit-min-device-pixel-ratio: 0) {...}

/* 只支持Opera */

@media all and (-webkit-min-device-pixel-ratio: 10000), not all and (-webkit-min-device-pixel-ratio: 0) {...}

/* 只支持Firefox */

@-moz-document url-prefix() {...}

如：

<p class="class">@hack@hack@hack@hack@hack@hack</p>

<style type="text/css">

@media all and (min-width:0){ /* 在IE9文本顏色爲紅色*/

 .class{color:#F00;}

} 

@media screen and (-webkit-min-device-pixel-ratio: 0) { /* 在Chrome、Safari中文本顏色爲綠色 */

 .class{color:#0F0;}

}

@media all and (-webkit-min-device-pixel-ratio: 10000), not all and (-webkit-min-device-pixel-ratio: 0) { /* 在Opera中文本顏色爲藍色 */

 .class{color:#00F;}

}

@-moz-document url-prefix() { /* 在Firefox中文本顏色爲品紅色 */

 .class{color:#F0F;}

} 

</style>

/*---------------------------------媒體查詢hack ]]---------------------------------*/

/*---------------------------------選擇器hack [[---------------------------------*/

/* 只支持IE7 */

html* 選擇器{}

/* 僅支持IE7 使用該選擇器須要HTML頂部有聲明：<!DOCTYPE HTML ......>*/

*+html 選擇器{}

/* 只支持IE6 */

*html 選擇器{}

如:

<p class="class">選擇器hack選擇器hack選擇器hack選擇器hack選擇器hack選擇器hack</p>

html* .class{color:#F00;} /* 在IE7中文本顏色爲紅色 */

*+html .class{color:#0F0;} /* 在IE7中文本顏色爲綠色 */

*html .class{color:#00F;} /* 在IE6中文本顏色爲藍色 */

/*---------------------------------選擇器 hack ]]---------------------------------*/

/*---------------------------------屬性hack [[---------------------------------*/

/* 只支持IE六、七、八、九、10 */

選擇器{屬性：屬性值\9;}

/* 只支持IE八、九、10 */

選擇器{屬性：屬性值\0;}

/* 支持IE8的部分屬性值、徹底支持IE九、10 */

選擇器{屬性：屬性值\9\0;}

/* 僅支持IE7和IE6 */

選擇器{*屬性：屬性值;}

/* 只支持IE6 */

選擇器{_屬性：屬性值;}

/* 只不支持IE6 */

選擇器{屬性：屬性值!important;}

/* 僅支持Safari和Chrome ，且只能放在選擇器的最後一個屬性，由於當瀏覽器解析[;;]後，不會再讀取後面屬性 */

選擇器{[;屬性:屬性值;]}

如：

<p class="class">屬性hack屬性hack屬性hack屬性hack屬性hack屬性hack</p>

<style type="text/css">

.class{

color:#F00\0;/* 在IE8和IE9中文本顏色爲紅色 */

*color:#0F0; /* 在IE7中文本顏色爲綠色 */

_color:#00F; /* IE6中顏色爲藍色 */

[;color:#F0F;]/* 在Safari和Chrome中顏色爲品紅色 */

}

</style>