CSS Hack

本文介绍CSSHack技巧,用于解决浏览器兼容性问题。主要包括属性标记法和选择器前缀法两大类,适用于不同版本的IE浏览器以及其他非IE浏览器。

前面的话

  CSS Hack是实现浏览器样式兼容的兜底办法,能不用就尽量不要使用。但是,针对一些浏览器的bug,比如老版本IE的bug,有时使用CSS Hack是不得已而为之的做法。本文将详细介绍CSS Hack。CSS Hack主要分为属性标记法和选择器前缀法两种

 

属性标记法

【IE6-】

  对于IE6-浏览器主要使用下划线_和中划线-这两种字符

_color:blue;
-color:blue;

【IE7-】

  对于IE7-浏览器可以使用非常多的字符,包括`~!@#$%^&*()=+{[]:<>,.?/

  但是,比较常用的是加号+和星号*

+color:blue;
*color:blue;

【IE10-】

  使用后缀\9可以识别出IE10-浏览器

color:blue\9;

【IE8+】

  使用后缀\0可以识别出IE8+浏览器 

color:blue\0;

【IE9、IE10】

  使用后缀\9\0可以识别出IE9、10浏览器

color:blue\9\0;

 

选择器前缀法

【IE6-】

  在选择器前面添加* html,可以识别IE6-浏览器

  [注意]*和html之间有无空格都可以生效

*html div{color:red}

【IE7】

  在选择器前面添加*+html,可以识别IE7浏览器

  [注意]*、+、html之间有无空格都可以生效

*+html div{color:red}

【IE8】

  在选择器外层使用@media \0,可以识别IE8浏览器

  [注意]@media和\0之间必须有空格

@media \0{
    div{color:red}
}

【IE9+及其他非IE浏览器】

  在选择器前面添加:root,可以识别IE9+及其他非IE浏览器

:root div{color:red}

转载于:https://www.cnblogs.com/zhaolizhe/p/6953983.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值