【原】欺騙瀏覽器的CSS（最新相容）一直更新

最後更新：2018-12-05 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

瀏覽器的相容性一直是個頭疼的問題，使用“欺騙”技術可使各個瀏覽器效果一致，花了些時間整理了各個瀏覽器的HACK，主要包括IE系列和最新版本的Chrome、Safari、Firefox、 Opera，比較全面的記錄下Hack，內容包括3部分：@ hack、屬性Hack、選取器Hack，這些Hack已經測試並得到有效運用，有需要的同學可以放心使用，筆者會在以後不斷的更新，如果有需要補充或者修改的，歡迎大家指教！

以下代碼之間的空格是必要的，缺少空格導致失效

/*---------------------------------@ hack [[---------------------------------*/

@media all and (min-width:0){選取器{}} /* 支援IE9、Chrome、Safari、Firefox、 Opera */

@media screen and (-webkit-min-device-pixel-ratio: 0) {選取器{}}/* 僅支援wekit核心瀏覽器Chrome、Safari */

@media all and (-webkit-min-device-pixel-ratio: 10000), not all and (-webkit-min-device-pixel-ratio: 0) {選取器{}} /* 只支援Opera */
@-moz-document url-prefix() {選取器{}} /* 只支援Firefox */

如：

<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 [[---------------------------------*/

html* 選取器{} /* 只支援IE7 */

*+html 選取器{}/* 僅支援IE7 使用該選取器需要HTML頂部有聲明：<!DOCTYPE HTML ......>*/

*html 選取器{}/* 只支援IE6 */

如:

<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 [[---------------------------------*/

選取器{屬性：屬性值\9;}/* 支援IE6+ */

選取器{屬性：屬性值\0;}/* 僅支援IE8和IE9 */

選取器{屬性：屬性值\9\0;}/* 僅支援IE9 */

選取器{*屬性：屬性值;}/* 僅支援IE7和IE6 */

選取器{_屬性：屬性值;}/* 只支援IE6 */

選取器{屬性：屬性值!important;}/* 只不支援IE6 */

選取器{[;屬性:屬性值;]}/* 僅支援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>

/*---------------------------------屬性hack ]]---------------------------------*/

最後的建議是：盡量寫出無hack的結構和樣式，做到可以向後相容，減少多餘代碼，更加可以體現自己的專業化的態度。

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More