css区分ie8/ie9/ie10/ie11 chrome firefox的代码

网站兼容性调试实在令人烦心，现在的网站设计人员真的要比以前费力很多，因为网页代码不再是只需满足一个IE6访问就行，而是要满足N多的浏览器访问正常才行。粗略算一下，目前至少要满足如下的浏览器要求：IE8、IE9、IE10、IE11、Chrome、Firefox，由于360使用的是Chrome内核，所以满足Chrome基本就满足了360。而IE家族真是一个版本一个样，我说IE怎么这么喜欢折腾呢？这给网页设计师带来多大的麻烦呀！今天，我就把这几个主要浏览器的CSS hack代码汇总一下。

例如现有CSS代码如下：

.divContent{
background-color:#eee;
}

那么下面我们就来写一下，如何使代码兼容几个主流浏览器。

/* IE8+ */
.divContent{
background-color:#eee\0;
}

/* IE8、IE9 */
.divContent{
background-color:#eee\8\9\0;
}

/* IE9 */
.divContent{
background-color:#eee\9\0;
}

注意，\8\0的写法是错误的，不能试图这样hack IE8。上述代码没有对IE10和IE11分别hack（好像没有对这两个浏览器单独hack的写法），那么IE10和IE11使用的就是IE8+那个样式。

IE家族hack完毕，下面看看如何hack Chrome和Firefox浏览器。

/* Chrome */
@media screen and (-webkit-min-device-pixel-ratio:0) {
    .divContent{
        background-color:#eee;
    }
}

/* Firefox */
@-moz-document url-prefix() {
    .divContent{
        background-color:#eee;
    }
}

另外，还可以这样hack其他浏览器

/* Chrome 和 opera */
@media all and (min-width:0){
    .divContent{
        background-color:#eee;
    }
}

/* IE9+ */
@media all and (min-width:0) {
    .divContent{
        background-color:#eee;
    }
}

/* IE10+ */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    .divContent{
        background-color:#eee;
    }
}

经过这样hack，网站浏览器兼容性问题就可以完美解决了。

css区分ie8/ie9/ie10/ie11 chrome firefox的代码相关推荐

bootstrap支持ie8 让IE6 IE7 IE8 IE9 IE10 IE11支持Bootstrap的解决方法
做一个在线系统,PC端也要做,但要兼容千恶的IE8[IE6 是万恶,打死我都不会管IE6],IE8 是我底线了md, 在IE8下 bottstrap 错乱,变形,不支持一些属性的问题,下面看了一篇某 ...
让IE6 IE7 IE8 IE9 IE10 IE11支持Bootstrap的解决方法
转自:http://blog.csdn.net/chenhongwu666/article/details/41513901 最近做一个Web网站,之前一直觉得bootstrap非常好,这次使用了bo ...
一个系统的base.css,兼容IE7，IE8,IE9,IE10,IE11,firefox,safari,谷歌，360,世界之窗等浏览器起的公共css
/* * name :tuzuoquan * mail :tuzq@XXXXX * date :2013/12/13 * version :0.1 ...
判断浏览器版本是否ie8,ie9,ie10,ie11并提示升级
判断是否IE浏览器极其版本主要是三种方法,第一种是通过 if IE 条件注释语句,第二种是通过 @cc_on 条件编译结合 document.documentMode 属性来判断,第三种则是简单粗暴地 ...
让bootstrap兼容ie6 ie7 ie8 ie9 ie10 ie11的解决方法
前两天遇到要bootstrap兼容ie各个版本的问题,但是各种百度,各种博客,最后算是解决了,但是迷迷糊糊的,现在来总结一下,如有雷同纯属总结. 首先看看代码的模样: <html> < ...
IE 浏览器判断增加支持 IE8 IE9 IE10 IE11等 IE浏览器（是不是IE浏览器判断）
老版代码: /*IE 浏览器判断 by moon */ function isIE() {var userAgent = navigator.userAgent; //取得浏览器的userAgent ...
IE兼容问题IE6,IE7,IE8,IE9,IE10
x-ua-compatible 用来指定IE浏览器解析编译页面的model x-ua-compatible 头标签大小写不敏感,必须用在 head 中,必须在除 title 外的其他 meta 之前使 ...
分别兼容IE7，IE8,IE9,IE10，超简单一看就会
分别兼容IE7,IE8,IE9,IE10,超简单一看就会前端时间公司要求兼容IE7-IE10,在这里总结一下,大佬勿喷针对IE7,IE6只对IE7,IE6生效的代码跟媒体查询用法一样 ` /* 只 ...
解决动易SiteWeaver6.8后台编辑器支持IE9/IE10/IE11浏览器的方法
解决动易SiteWeaver6.8后台编辑器支持IE9/IE10/IE11浏览器的方法作者:佚名来源:网络发布时间:2014-5-19 点击数:2260次字体: 大小解决动易Site ...

css区分ie8/ie9/ie10/ie11 chrome firefox的代码

css区分ie8/ie9/ie10/ie11 chrome firefox的代码相关推荐

最新文章

热门文章