利用CSS HACK技术为各种浏览器添加专属样式,实现兼容

一 什么是hack

CSS hack由于不同厂商的浏览器,比如Internet Explorer,Safari,Mozilla Firefox,Chrome等,或者是同一厂商的浏览器的不同版本,如IE6和IE7,对CSS的解析认识不完全一样,因此会导致生成的页面效果不一样,得不到我们所需要的页面效果。 这个时候我们就需要针对不同的浏览器去写不同的CSS,让它能够同时兼容不同的浏览器,能在不同的浏览器中也能得到我们想要的页面效果。

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

二 hack的实现原理

众所周知,如果在一个css样式选择器中存在两个名称相同的属性,浏览器一般会以最后面的属性为准。

1
2
3
4
5
6
7
<style>
    .css-hack {
        background-color: red;
        background-color: blue; /* 最终背景色显示为蓝色 */
    }
</style>
<div class="css-hack">testDiv</div>
如上所示,最终div的背景颜色会显示为蓝色,那么这就是css hack的实现原理。

所以即使我们在属性名称前面加一个下划线_IE 6 照样可以识别,并且只有IE 6可以识别。因此,我们就可以利用这个特性,让IE 6实现某些特定的效果:

1
2
3
4
.css-hack {
    background-color: red;    /* 在其他浏览器上显示为红色 */
    _background-color: blue;    /* 在IE 6上显示为蓝色 */
}

由此我们可以发现,实现hack其实是非常简单的事情,就是比较麻烦而已,那么下面我将总结一下兼容IE 6-11、FireFox、Chrome、Safari、Opera等各种浏览器的hack写法。

三 各浏览器hack写法

众IE毒瘤 :

1
2
3
4
.css-hack {
    background-color: red;    /* 其他浏览器上显示为红色 */
    background-color: blue \9;    /* 所有IE浏览器上显示为蓝色 */
}

IE 6-7 :

1
2
3
4
5
.css-hack {
    color: red;    /* 其他浏览器显示红色 */
    *color: blue;    /*    IE 6、IE 7显示为蓝色 */
   +color: blue;    /*    IE 6、IE 7显示为蓝色 */
}

IE 8 :

1
2
3
4
5
6
7
.css-hack {
    color: red;    /* 其他浏览器显示红色 */
}
 
@media \0screen {
    .css-hack { color: blue; }    /* 只有IE 8显示蓝色 */
}

IE 9 :

1
2
3
4
5
.css-hack {
    color: red;    /* 其他浏览器显示红色 */
    color:blue\0;    /* ie 8-9*/
    color:blue\9\0;    /* ie 9*/
}

IE 10+ :

1
2
3
4
5
6
7
8
9
.css-hack {
    color: red;    /* 其他浏览器显示红色 */
}
 
@media screen and(-ms-high-contrast:active),(-ms-high-contrast:none) {
    .css-hack {
        color:blue;    /* IE10 - 11显示蓝色 */
    }
}

Firefox :

1
2
3
4
5
6
7
8
9
.css-hack {
    color: red;    /* 其他浏览器显示红色 */
}
 
@-moz-document url-prefix() {
    .css-hack {
        color: blue;    /* FireFox显示为蓝色 */
    }
}

Chrome、Safari等Webkit内核浏览器 :

1
2
3
4
5
6
7
8
9
.css-hack {
    color: red;    /* 其他浏览器显示红色 */
}
 
@media screen and (-webkit-min-device-pixel-ratio:0) {
    .css-hack {
        color: blue;    /* Webkit内核浏览器显示蓝色 */
    }
}

发布评论
还没有评论,快来抢沙发吧!