CSS HACK 如何书写

最新推荐文章于 2025-05-17 11:42:43 发布

weixin_30376323

最新推荐文章于 2025-05-17 11:42:43 发布

阅读量130

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/zk12138/p/10403105.html

本文深入探讨了CSS Hack的概念，介绍了为解决不同浏览器兼容性问题而采用的三种主要Hack方法：css属性前缀法、选择器前缀法及IE条件注释法，并详细解释了每种方法的应用场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

什么是css hank

　　由于不同厂商的流览器或某浏览器的不同版本（如IE6-IE11,Firefox/Safari/Opera/Chrome等），对CSS的支持、解析不一样，导致在不同浏览器的环境中呈现出不一致的页面展现效果。这时，我们为了获得统一的页面效果，就需要针对不同的浏览器或不同版本写特定的CSS样式，我们把这个针对不同的浏览器/不同版本写相应的CSS code的过程，叫做CSS hack!

css hank的类型
　　有三种表现形式，css属性前缀法，选择器前缀法，以及IE条件注释法。

css属性前缀法

IE6+ css hack：

Selector { _property: value; }
IE7+ css hack：

Selector { *+property: value; }
IE8+ css hack：

Selector { property: value\0; }
IE9+ css hack：

Selector { property: value\9\0; }

选择器前缀法:

是针对一些页面表现不一致或者需要特殊对待的浏览器，在CSS选择器前加上一些只有某些特定浏览器才能识别的前缀进行hack。
目前最常见的是
html 前缀只对IE6生效
+html +前缀只对IE7生效
@media screen\9{...}只对IE6/7生效
@media \0screen {body { background: red; }}只对IE8有效
@media \0screen\,screen\9{body { background: blue; }}只对IE6/7/8有效
@media screen\0 {body { background: green; }} 只对IE8/9/10有效
@media screen and (min-width:0\0) {body { background: gray; }} 只对IE9/10有效
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {body { background: orange; }} 只对IE10有效

IE条件注释法：

<!–[if !IE]><!–> 除IE外都可识别 <!–<![endif]–>
<!–[if IE]> 所有的IE可识别 <![endif]–>
<!–[if IE 6]> 仅IE6可识别 <![endif]–>
<!–[if lt IE 6]> IE6以及IE6以下版本可识别 <![endif]–>
<!–[if gte IE 6]> IE6以及IE6以上版本可识别 <![endif]–>

转载于:https://www.cnblogs.com/zk12138/p/10403105.html