由于各大浏览器尤其IE浏览器对web标准支持情况不一,导致标准的网页在各个浏览器中的表现不一,因此,解决各浏览器兼容性问题成为了前端工程师最重要的工作之一,而所谓的hack技术则是前端开发中必用的。
CSS hack的写法有很多种,其中,特殊符号的应用最为普遍,也最为简洁,下面一一介绍了特殊符号类型的CSS hack技术:
1、反斜线(\)
适用浏览器:IE/Mac
反斜线(\)hack利用了IE/Mac的一个bug。以\*/结束的注释在IE/Mac上是不正确关闭的,所以那些需要在IE/Mac上被忽略的语句可以放在这种注释后面。
/* 在IE Mac上忽略下面的语句 \*/
selector { ...styles... }
/* 忽略结束 */
2、下划线(_)
适用浏览器:IE6及其以下版本
IE 6 及以下的版本可以识别带有下划线前缀的属性,而其它浏览器会忽略它。因此,一个属性前面加上下划线或者连字符,就成为了IE6及以下版本浏览器的专有属性。
#elem {
width: [W3C Model Width];
_width: [BorderBox Model];
}
PS:这个hack利用浏览器的bug使用了无效的CSS,因而不推荐使用。
3、星号(*)
适用浏览器:IE7以下版本
除了下划线和连字符,版本7及以下的IE可以识别以非字母字符为前缀的属性,而其它浏览器会忽略。
#elem {
width: [W3C Model Width];
*width: [BorderBox Model];
}
PS:这个hack利用浏览器的bug使用了无效的CSS,因而不推荐使用。
4、星号 HTML(* html)
适用浏览器:IE4-6
HTML元素是W3C标准DOM的根元素,但是IE 4至6的版本中还有一个神秘的父元素。完全兼容的浏览器会忽略这个* html选择器,但IE4-6却会对它正常处理。
* html p {font-size: 5em; }
PS:这个HACK使用了完全有效的CSS。
5、星号加号(*+)
适用浏览器:IE7
*:first-child+html p { font-size: 5em; }
或者:
*+html p { font-size: 5em; }
PS:只在IE7标准模型里工作正常,在怪异模式下不能用。同时,也被IE8的兼容模式(相当于IE7的标准模式)所支持。它也使用了有效的CSS。
6、子选择器(>)
适用浏览器: IE6以上版本及非IE浏览器
IE6和早期的版本不支持“子选择器”(>),我们可以利用这个为其它浏览器指定特别的规则。
html > body p { color: blue; }
7、子选择器加注释(>/**/)
适用浏览器: IE7以上版本及非IE浏览器
虽然IE7支持对子选择器,但通过以下hack方法也可以把IE7也排除。当一个空的注释紧跟在子选择器的后面重复的时候,IE7会不识别后面的规则,就和较早版本的浏览器一样。
html >/**/ body p { color: blue; }
分享到:
相关推荐
CSS hack的写法有很多种,其中,特殊符号的应用最为普遍,也最为简洁,下面一一介绍了特殊符号类型的CSS hack技术: 1、反斜线(\) 适用浏览器:IE/Mac 反斜线(\)hack利用了IE/Mac的一个bug。以\*/结束的注释...
什么是CSS hack: 由于不同的浏览器,对CSS的解析认识不一样,从而导致生成的页面效果不一样,得不到我们所需要的页面效果。 针对不同的浏览器写不同的CSS code的过程,就叫CSS hack,也叫写CSS hack
important也作为一个hack手段,其实这是一个误区。!important常常被我们用来更改样式,而不是兼容 hack。造成这个误区的原因是IE6在某些情况下不主动识别!important,以至于常常被人误用做识别IE6的hack。可是,大家...
css的hack技术,跨浏览器兼容问题,想从事web前端的孩纸们快来看看啊
css safari浏览器识别CSS hack.docx
各浏览器CSS hack兼容表各浏览器CSS hack兼容表
css hack ie6 ie7 ie8 firefox等浏览器兼容性
史上最全的CSS hack方式一览.mhtml史上最全的CSS hack方式一览.mhtml史上最全的CSS hack方式一览.mhtml史上最全的CSS hack方式一览.mhtml史上最全的CSS hack方式一览.mhtml史上最全的CSS hack方式一览.mhtml史上最全...
10个非常有用的CSS hack,浏览器兼容性处理
怎样避免使用css hack ,大家都知道css hack不符合标准
CSS Hack 浏览器兼容文档 ,用于兼容IE6、IE7、IE8、IE9、FF
各种类型 CSSHACK各种类型 CSSHACK
技术资料\区分IE6,IE7和firefox的CSS hack-CSS教程.doc
IE6,IE7,IE8i,firefox 不兼容的问题。
css hack 兼容性的总结与体会. IE6,IE7,IE8,IE9,firefox,apple,chrome等等浏览器的兼容性
不同浏览器、不同版本存在css的差异,CSS hack可以兼容,主要针对ie浏览器
CSS大全CSS大全CSS大全CSS大全CSS大全
css hack,ie6png透明,css判断ie版本