header-bg.jpg
利用CSS HACK技术为各种浏览器添加专属样式,实现兼容
发表于 2018-01-18 21:52
|
分类于 CSS3
|
评论次数 0
|
阅读次数 1361

42701516283448.jpg

什么是hack

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

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

hack 的实现原理

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

<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 实现某些特定的效果:

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

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

各浏览器 hack 写法

众IE毒瘤 :

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

IE 6-7 :

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

IE 8 :

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

IE 9 :

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

IE 10+ :

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

Firefox :

.css-hack {
    color: red;    /* 其他浏览器显示红色 */
}
 
@-moz-document url-prefix() {
    .css-hack {
        color: blue;    /* FireFox显示为蓝色 */
    }
}

Chrome、Safari等Webkit内核浏览器 :

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

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