目前非常全面的CSS兼容問題資料匯集

2020-03-24 16:55:51

字體：大中小

來源：轉載

供稿：網友

CSS 兼容問題一直困擾著CSSer，面對各瀏覽器，往往感覺束手無策，愁眉不展。CSS Hack是在標準CSS沒辦法兼容各瀏覽器顯示效果時才會用上的補救方法，在各瀏覽器廠商解析CSS沒有達成一致前，我們只能用這樣的方法來完成這樣的任務。

我進行前端開發的時候，測試用的瀏覽器大致有: IE7、IE6、Opera9（文章撰寫時版本為9.25 8825），Safari3（文章撰寫時版本為3.0.4 523.15），Firefox2（文章撰寫時版本為2.0.0.11）等。

在正常的 selector { property:html' target='_blank'>value; } 的基礎上常會根據具體情況為相同元素使用Hack以達到瀏覽器間統一，更詳細的CSS兼容知識。 IE系列 selector { +property:value; } 在屬性名前加上加號"+",這個Hack只有IE系列可以識別.
selector { *property:value; } 在屬性名前加上星號"*",這個Hack只有IE系列可以識別.
selector { _property:value; } 在屬性名前加上下劃線"_",這個Hack只有IE系列 (除IE7外) 識別.
* html selector{ property:value; } 在選擇器上運用繼承法 * html selector, 這個Hack只有IE系列 (除IE7外) 可以識別.
html/**/ body selector { property:value; } 在選擇器上運用繼承法 html/**/ body selector ,這個Hack只有IE系列 (除IE7外) 可以識別.
selector { property/**/:value; } 在屬性名和冒號":"之間加入注釋,屏蔽IE6用.
selector/**/ { property/**/:value; } 在選擇器和花括號"{"之間以及在屬性名和冒號":"之間加入注釋,屏蔽IE5和IE6用 (不屏蔽IE5.5) .
select/**/ { property:value; } 在選擇器和花括號"{"之間加入注釋,屏蔽IE5用.
*+html selector { property:value !important; } 在選擇器上運用繼承法 *+html selector 再加上 !important, 這個Hack只有IE7可以識別. Firefox： *:lang(lang) selector { property:value !important; } 用偽類lang(語言)再加上!important進行定義的話,目前只有Firefox可以識別. Safari： selector:empty { property:value !important; } 用偽類empty再加上!important進行定義的話,目前只有Safari可以識別. Opera： @media all and (min-width: 0px){ selector { property:value; } } 利用特殊繼承法進行定義的話,目前只有Opera可以識別. 以上的CSS Hack并不完整，歡迎大家一起補充。
對于Hack的運用，最普遍的現象是CSS盒模型Hack，清除浮動Hack。 CSS盒模型在IE5.X上是有嚴重解析錯誤的.這個Hack針對IE5.X： selctor { width:IE5.X寬度; voice-family :""}""; voice-family:inherit; width:正確寬度; } 清除浮動Hack,相信這個定義用的人很多： selector:after { content:"."; display:block; height:0; clear:both; visibility:hidden; } 另外還有很多很多CSS Hack的運用，一一列舉的話可能能寫成一本書了…… 本文作者:html教程

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。

上一篇：用Vue+CSS3怎么做交互特效

下一篇：Dreamweaver中編寫CSS需要掌握的技巧