CSS Hack梳理

2021-03-17 05:41 jianzhan

CSS Hack是在规范CSS没法适配各访问器显示信息实际效果时才会用上的补救方式,在各访问器厂商分析CSS沒有达到1致前,大家只能用这样的方式来进行这样的每日任务.
我开展前端开发开发设计的情况下,检测用的访问器大概有: IE7, IE6, Opera9(文章内容编写时版本号为9.25 8825), Safari3(文章内容编写时版本号为3.0.4 523.15), Firefox2(文章内容编写时版本号为2.0.0.11).
在一切正常的 selector { property:value; } 的基本上常会依据实际状况为同样元素应用Hack以做到访问器间统1.
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能够鉴别.
以上的Hack其实不详细,大伙儿1起填补.
对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的应用,11例举的话将会能写成1本书了...想起再加上吧.
下面的适配1览图来源于:http://centricle.com/ref/css/filters/