×

回顾下CSS HACK的用法

作者:天空2019.12.09来源:Web前端之家浏览:6427评论:0
关键词:htmlcsshack

回想当初IE的兼容问题,一路走来也是坑无处不在。

css hack怎么用    

CSS Hack 大致有3种表现形式:

1、属性前缀法(CSS类内部 Hack)

● 比如IE6能识别下划线"_"和星号"" ,IE7能识别星号"",但不能识别下划线,IE6-IE10都认识"\9",而Firefox这三个都不能认识。

● 对于书写顺序的关系,一般是将识别能力强的浏览器的CSS写在后边

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

这样的话,就成功的对IE6,7成功的做了一个hack。

2、选择器前缀法(选择器 Hack)

语法是这样的:<hack> selector{ sRules }

例如:IE6能识别*html .class{} , IE7能识别 +html .class{}或:first-child+html .class{}

例如:针对IE9的hack可以这么写:

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

3、IE条件注释法(HTML 头部引用 Hack)

针对所有IE(注:IE10+已经不再支持条件注释)HTML头部引用就比较特殊了,类似于程序语句,只能使用在HTML文件里,而不能在CSS文件中使用,并且只有在IE浏览器下才能执行,在其他浏览器下面会被当做注释视而不见。比如: 

<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]–>

您的支持是我们创作的动力!
温馨提示:本文作者系 ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://jiangweishan.com/article/htm234098230948.html

网友评论文明上网理性发言 已有0人参与

发表评论: