hack原理及常用hack

原理

引:https://blog.csdn.net/minedayu/article/details/25124441

利用不同浏览器对CSS的支持和解析结果不一样编写针对特定浏览器样式。

常用的CSS hack 有三种方式

1、CSS 内部hack

CSS 内部hack 语法是这样的 selector{?property:value?;} 比如IE6能识别下划线"“和星号”",IE7能识别星号"",但不能识别下划线"",而firefox两个都不能认识。对于书写顺序的关系,一般是将识别能力强的浏览器的CSS写在后面。

<style> 
div{  
    background:green;/*forfirefox*/  
    *background:red;/*forIE6 IE7*/  
}  
</style> 

这样的话就成功对IE6,7 做了一次hack;

再比如,“!important”的写法只有IE6不能识别,其它版本IE及现代浏览器都可以识别

2、选择器hack

选择器hanck主要是针对IE浏览器,其实并不怎么常用

语法是这样的: selector{ sRules }
针对IE9的hack可以这么写

:root .test
{
    background-color:green;
}

3、HTML 头部引用

HTML头部引用就比较特殊了,类似于程序语句,只能使用在HTML文件里,而不能在CSS文件中使用,并且只有在IE浏览器下才能执行,在其他浏览器下面会被当做注释视而不见。

<!– 默认先调用css.css样式表 –>
<link rel="stylesheet" type="text/css" href="css.css" />
<!–[if IE 7]>
<!– 如果IE浏览器版是7,调用ie7.css样式表 –>
<link rel="stylesheet" type="text/css" href="ie7.css" />
<![endif]–>
<!–[if lte IE 6]>
<!– 如果IE浏览器版本小于等于6,调用ie.css样式表 –>
<link rel="stylesheet" type="text/css" href="ie.css" />
<![endif]–>

注:
lte:就是Less than or equal to的简写,也就是小于或等于的意思。
lt :就是Less than的简写,也就是小于的意思。
gte:就是Greater than or equal to的简写,也就是大于或等于的意思。
gt :就是Greater than的简写,也就是大于的意思。
! :就是不等于的意思,跟javascript里的不等于判断符相同。

  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值