web兼容性 CSS !important 到 CSS hack

最新推荐文章于 2021-06-09 09:25:58 发布

ccfxue

最新推荐文章于 2021-06-09 09:25:58 发布

阅读量1.7k

点赞数

分类专栏： css 文章标签： CSS hack important

css 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

css !important作用是提高指定CSS样式规则的应用优先权。

!important是CSS1就定义的语法，作用是提高指定样式规则的应用优先权。语法格式{ cssRule !important }，即写在定义的最后面，例如：box{color:red !important;}

浏览器识别

ie7，ie8，firefox，chrome等高端浏览器下，已经可以识别 !important属性，但是IE 6.0仍然不能完全识别. important的样式属性和覆盖它的样式属性单独使用时(不在一个{}里)，IE 6.0认为! important优先级较高，否则当含! important的样式属性被同一个{}里的样式覆盖时，IE 6.0认为! important较低!

        important，最主要是为了IE 6.0浏览器。

   案例分析：
        最重要的一点是：IE 6.0一直都不支持这个语法，而其他的浏览器都支持。因此我们就可以利用这一点来分别给IE和其他浏览器不同的样式定义，例如，我们定义这样一个样式：

colortest
{
   border:20px solid #60A179 !important;
   border:20px solid #00F;
   padding: 30px;
   width : 300px;
}

      在Mozilla中浏览时候，能够理解!important的优先级，因此显示#60A179的颜色：
      在IE中浏览时候，不能够理解!important的优先级，因此显示#00F的颜色：
      可以看到，利用!important，我们可以针对IE和非IE浏览器设置不同的样式，只要在非IE浏览器样式的后面加上!important。

     ie6不完全支持!important
       IE支持重定义中的!important，例如：

.yuanxin {color:#e00!important;}
.yuanxin {color:#000;}

你将会发现定义了样式class="yuanxin"时，在IE下，字体显示为红色（#e00）。

但不支持同一定义中的!important。例如：

.yuanxin {color:#e00!important;color:#000;}

此时在IE6下不支持，你将会发现定义了样式class="yuanxin"时，字体显示为黑色（#000）。

ie6中：
/*样式1*/
#a{width:100 !important;} /*有效*/
#a{width:50px;} /*无效*/
/*样式2*/
#a{width:100px !important; width:50px;} /*width:100px无效，width:50px 有效*/

=================================================================================================

CSS hack的目的就是使你的CSS代码兼容不同的浏览器。当然，我们也可以反过来利用CSS hack为不同版本的浏览器定制编写不同的CSS效果。

CSS Hack大致有3种表现形式，CSS类内部Hack、选择器Hack以及HTML头部引用(if IE)Hack，

CSS Hack主要针对类内部Hack：比如 IE6能识别下划线"_"和星号" * "，IE7能识别星号" * "，但不能识别下划线"_"，而firefox两个都不能认识。等等

选择器Hack：比如 IE6能识别*html .class{}，IE7能识别*+html .class{}或者*:first-child+html .class{}。等等

HTML头部引用(if IE)Hack：

针对所有IE：<![endif]-->，

针对IE6及以下版本：<![endif]-->，

这类Hack不仅对CSS生效，对写在判断语句里面的所有代码都会生效。

书写顺序，一般是将识别能力强的浏览器的CSS写在后面。

常用的CSS hack方式

(1)方式一条件注释法
只在IE下生效

只在IE6下生效

只在IE6以上版本生效

只在IE8上不生效

非IE浏览器生效

（2）方式二类内属性前缀法
属性前缀法是在CSS样式属性名前加上一些只有特定浏览器才能识别的hack前缀，以达到预期的页面展现效果。

(参照IE浏览器各版本 CSS hack 对照表)

说明：在标准模式中

    “-″减号是IE6专有的hack
    “\9″ IE6/IE7/IE8/IE9/IE10都生效
    “\0″ IE8/IE9/IE10都生效，是IE8/9/10的hack
    “\9\0″ 只对IE9/IE10生效，是IE9/10的hack

（3）CSS hack方式三：选择器前缀法
选择器前缀法是针对一些页面表现不一致或者需要特殊对待的浏览器，在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有效等等

实际应用

比如要分辨IE6和firefox两种浏览器，可以这样写：

div{
   background:green;/*forfirefox*/
   *background:red;/*forIE6*/(bothIE6&&IE7)
}

        我在IE6中看到是红色的，在firefox中看到是绿色的。
解释一下：
         上面的css在firefox中，它是认识不了后面的那个带星号的东西是什么的，于是将它过滤掉，不予理睬，解析得到的结果是:div{background:green},于是理所当然这个div的背景是绿色的。
         在IE6中呢，它两个background都能识别出来，它解析得到的结果是:div{background:green;*background:red;},于是根据优先级别，处在后面的red的优先级高，于是当然这个div的背景颜色就是红色的了。

CSS hack:区分IE6，IE7，firefox
区别不同浏览器，CSS hack写法：
区别IE6与FF：

background:orange;*background:blue;

区别IE6与IE7：

background:green!important;background:blue;

区别IE7与FF：

background:orange;*background:green;

区别FF，IE7，IE6：

background:orange;*background:green;_background:blue;
background:orange;*background:green!important;*background:blue;

注：IE都能识别*;标准浏览器(如FF)不能识别*；
IE6能识别*；不能识别 !important;
IE7能识别*，能识别!important;
FF不能识别*，但能识别!important;

浏览器优先级别:FF<IE7<IE6,CSS hack书写顺序一般为FF IE7 IE6

以: " #demo {width:100px;} "为例;

#demo {width:100px;}          /*被FIREFOX,IE6,IE7执行.*/
* html #demo {width:120px;}   /*会被IE6执行,之前的定义会被后来的覆盖,所以#demo的宽度在IE6就为120px; */
*+html #demo {width:130px;}         /*会被IE7执行*/

所以最后,#demo的宽度在三个浏览器的解释为: FIREFOX:100px; ie6:120px; ie7:130px;

IE8 最新css hack：
"\9"　例:"border:1px \9;".这里的"\9"可以区别所有IE和FireFox.（只针对IE9 Hack）
"\0"　IE8识别，IE6、IE7不能.
"*"　IE6、IE7可以识别,IE8、FireFox不能.
"_"　IE6可以识别"_",IE7、IE8、FireFox不能.

background-color:blue;     各个浏览器都认识，这里给firefox用；
background-color:red\9;     \9所有的ie浏览器可识别；
background-color:yellow\0;     \0 是留给ie8的，最新版opera也认识，后面自有hack写了给opera认的，所以，\0我们就认为是给ie8留的；
+background-color:pink;      + ie7定了；
_background-color:orange;     _专门留给神奇的ie6；
:root #test { background-color:purple\9; }    :root是给ie9的，网上流传了个版本是 :root #test { background-color:purple\0;}，这个，新版opera也认识，所以经笔者反复验证最终ie9特有的为:root 选择符 {属性\9;}
@media all and (min-width:0px){ #test {background-color:black\0;} }   这个是老是跟ie抢着认\0的神奇的opera，必须加个\0,不然firefox，chrome，safari也都认识。。。
@media screen and (-webkit-min-device-pixel-ratio:0){ #test {background-color:gray;} }  最后这个是浏览器新贵chrome和safari的。

注意了：不管是什么方法，书写的顺序都是firefox的写在前面，IE7的写在中间，IE6的写在最后面。

ccfxue

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
web兼容性 CSS !important 到 CSS hack

css !important作用是提高指定CSS样式规则的应用优先权。 !important是CSS1就定义的语法，作用是提高指定样式规则的应用优先权。语法格式{ cssRule !important }，即写在定义的最后面，例如：box{color:red !important;} 浏览器识别 ie7，ie8，firefo
复制链接

扫一扫