其实我也觉得非常麻烦，开始的时候都用

    _XXX:XXX; /* IE6支持 */

    *XXX:XXX; /* IE6、IE7支持 */

    *+XXX:XXX; /* IE7支持 */

    XXX:XXX\9; /* IE6、IE7、IE8支持 */

    XXX:XXX\0; /* IE8支持 */

    创建条件样式表，并在HTML中body里添加相应的class类名：

    <!–[if IE6]–>

    <!–[if IE7]–>

    <!–[if IE8]–>

    <!–[if IE9]–>

    <!–[if !IE]–>

类似于这样的方式来解决一些工程上面的一些问题，但是还是感觉很累，相当于每一块都要独立写一个CSS，另外的就是CSS3的部分内容还不会兼容，但是面对于现在人而言，着重着美感，这让前端攻城狮们非常头大，于是，我浏览各大网站看看他们是如何解决这一问题。

有一部分是禁止IE低版本显示，弹出一个弹出层，提示下载其他浏览器，也有一部分是直接给出一段提示让用其他浏览器打开……，对于我们而言用户才是上帝，所以，我们也不能排除有一部分是IE的脑残粉。

那么让我们看看他们是如何解决这些问题的：

Github ：

<meta http-equiv="X-UA-Compatible" content="IE=edge">

腾讯云 ：

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<!--[if IE 8 ]>

    <body class="ie8">

<![endif]-->

<!--[if lt IE 8]>

    <link href="//imgcache.qq.com/qcloud/mc/css/ie67sucks.min.css" rel="stylesheet" />

    <script src="//imgcache.qq.com/qcloud/mc/ie67sucks.min.js?v=20150331"></script>

<![endif]-->

百度 ：

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

npm ：

<!--[if lt IE 9]>

    <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.2/html5shiv.min.js"></script>

<![endif]-->

GitLab ：

<!--[if lt IE 9]>

    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>

<![endif]-->

知乎 ：

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

<!--[if lt IE 9]>

<script src="https://static.zhihu.com/static/components/respond/dest/respond.min.js"></script>

<link href="https://static.zhihu.com/static/components/respond/cross-domain/respond-proxy.html" id="respond-proxy" rel="respond-proxy" />

<script src="/static/components/respond/cross-domain/respond.proxy.js"></script>

<![endif]-->

…………

大多部分都引用了

那么说明这两个东西都可以解决IE的问题。

另外，我再给大家一串解决字体图标兼容IE的JavaScript代码

function(){

var patterns = {

    text: /^['"]?(.+?)["']?$/,

    url: /^url\(["']?(.+?)['"]?\)$/

};

function clean(content) {

    if(content && content.length) {

        var text = content.match(patterns.text)[1],

            url = text.match(patterns.url);

        return url ? '<img src="' + url[1] + '" />': text;

    }

}

function inject(prop, elem, content) {

    if(prop != 'after') prop = 'before';

    if(content = clean(elem.currentStyle[prop])) {

        $(elem)[prop == 'before' ? 'prepend' : 'append'](

            $(document.createElement('span')).addClass(prop).html(content)

        );

    }

}

$.pseudo = function(elem) {

    inject('before', elem);

    inject('after', elem);

    elem.runtimeStyle.behavior = null;

};

if(document.createStyleSheet) {

    var o = document.createStyleSheet(null, 0);

    o.addRule('.dummy','display: static;');

    o.cssText = 'html, head, head *, body, *.before, *.after, *.before *, *.after * { behavior: none; } * { behavior: expression($.pseudo(this)); }';

}

};

各浏览器CSS兼容代码：

Firefox

@-moz-document url-prefix() {

    .css {

        color:lime;

    }

}

支持Firefox的还有几种写法：

/* 支持所有firefox版本 */ 

    #selector[id=selector] {

        color: white;

    } 

或者： 

@-moz-document url-prefix() {

    .css {

        color: white;

    }

} 

/* 支持所有Gecko内核的浏览器 (包括Firefox) */

 *>.css {

    color: white;

 }

Webkit枘核(chrome and safari)

@media screen and (-webkit-min-device-pixel-ratio:0) {

    .css {

        color: white;

    }

}

上面写法主要是针对Webkit内核的浏览器，如Google Chrome 和 Safari浏览器

Opera

html:first-child>body .css {

    color:white;

} 

或者： 

@media all and (min-width:0) {

    .css {

        color: white;

    }

} 

或者： 

@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) {

    head~body .css {

        color: white;

    }

}

IE9

:root .css {

    color: white9;

}

IE9+都能够兼容

IE8

.css {

    color: white/;

}

 或者： 

@media ?screen{

    .css {

        color: white;

    }

}

IE8+都能够兼容

IE7

*+html .css{

    color:white;

} 

或 

*:first-child+html .css {

    color:white;

}

只兼容IE7

IE6

.css {

    _property/**/:/**/white;

} 

或者： 

.css {

    _property: white;

} 

或者：

*html .css {

    color: white;

}

只兼容IE6

Update increasingly front-end engineering, resulting in many engineers ignored IE, so many engineers believe IE browser kernel is a pit, and often very reluctant to go to IE's engineering, in particular the low version of IE compatibility, most of the new engineers will very exclusive IE kernel, while older engineers will find compatible IE is too much trouble.

In fact, I find it very troublesome, beginning with all

_XXX: XXX; / * IE6 support * /

* XXX: XXX; / * IE6, IE7 support * /

* + XXX: XXX; / * IE7 * Support /

XXX: XXX \ 9; / * IE6, IE7, IE8 support * /

XXX: XXX \ 0; / * IE8 support * /

Creating conditions stylesheet, and add the appropriate class name of the class in the HTML body inside:

<-! [If IE6] ->

<-! [If IE7] ->

<-! [If IE8] ->

<-! [If IE9] ->

<-! [! If IE] ->

Like in such a way to solve some engineering problems above, but still feel very tired, each piece must be equivalent to an independent write a CSS, the other part is also not compatible with CSS3, but now people in the face , focusing on the beauty, which makes the front end of the siege lion heads are very large, so I browse the site to see how they solve this problem.

Part is prohibited IE version lower display, pop up a pop-up layer, prompted to download other browsers, but also in part directly give some tips to get open ...... for us, God is the users use other browsers, so we IE can not be excluded in part of the brain residual powder.

So let's see how they solve these problems:

Github:

<Meta http-equiv = "X-UA-Compatible" content = "IE = edge">

Tencent says:

<Meta http-equiv = "X-UA-Compatible" content = "IE = edge">

<-! [If IE 8]>

<Body class = "ie8">

<! [Endif] ->

<-! [If lt IE 8]>

<Link href = "// imgcache.qq.com/qcloud/mc/css/ie67sucks.min.css" rel = "stylesheet" />

<Script src = "// imgcache.qq.com/qcloud/mc/ie67sucks.min.js?v=20150331"> </ script>

<! [Endif] ->

Baidu:

<Meta http-equiv = "X-UA-Compatible" content = "IE = edge, chrome = 1">

npm:

<-! [If lt IE 9]>

    <Script src = "// cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.2/html5shiv.min.js"> </ script>

<! [Endif] ->

GitLab:

<-! [If lt IE 9]>

<Script src = "http://html5shim.googlecode.com/svn/trunk/html5.js"> </ script>

<! [Endif] ->

Know almost :

<Meta http-equiv = "X-UA-Compatible" content = "IE = edge, chrome = 1">

<-! [If lt IE 9]>

<Script src = "https://static.zhihu.com/static/components/respond/dest/respond.min.js"> </ script>

<Link href = "https://static.zhihu.com/static/components/respond/cross-domain/respond-proxy.html" id = "respond-proxy" rel = "respond-proxy" />

<Script src = "/ static / components / respond / cross-domain / respond.proxy.js"> </ script>

<! [Endif] ->

............

IE兼容方法的更多相关文章

  1. placeholder兼容方法（兼容IE8以上浏览器）

    //placeholder兼容方法(兼容IE8以上浏览器) var JPlaceHolder = { //检测 _check: function () { return 'placeholder' i ...

  2. JS--事件对象中部份浏览器不兼容方法

    测试时主要用的浏览器是Firefox 28.0.IE11.IE8.Chrome 34.0  一.什么是事件对象:当触发某个事件的时候,会产生一个事件对象,这个对象包含着所有的与事件有关的信息,包括导致 ...

  3. AJAX原理解析与兼容方法封装

    AJAX常用参数 AJAX对象兼容 AJAX对象方法与属性 AJAX封装兼容方法源码 AJAX全称Asynchronous JavaScript and XML(异步的JavaScript与XML), ...

  4. CSS模糊效果及其兼容方法

    今天在整理IE滤镜时网站访问这里,居然找到模糊滤镜blur(),感觉太不可思议了,想不到IE居然会有这么多种滤镜效果,这基本上是模仿PS的.今天的重点是模糊滤镜 CSS模糊效果及其兼容方法 实例 兼容 ...

  5. CSS3新特性，兼容性，兼容方法总结

    css3手册css3手册 边框 border-radius 用于添加圆角效果 语法: border-radius:[ <length> | <percentage> ]{1,4 ...

  6. bind()函数的深入理解及两种兼容方法分析

    在JavaScript中,bind()函数仅在IE9+.Firefox4+.Chrome.Safari5.1+可得到原生支持.本文将深入探讨bind()函数并对两种兼容方法进行分析比较.由于本文将反复 ...

  7. placeholder在不同浏览器下的表现及兼容方法

    1.什么是placeholder?    placeholder是html5新增的一个属性,当input或者textarea设置了该属性后,该值的内容将作为灰字提示显示在文本框中,当文本框获得焦点(或 ...

  8. placeholder在不同浏览器下的表现及兼容方法（转）

    1.什么是placeholder?    placeholder是html5新增的一个属性,当input或者textarea设置了该属性后,该值的内容将作为灰字提示显示在文本框中,当文本框获得焦点(或 ...

  9. placeholder在不同浏览器下的表现及兼容方法 placeholder兼容

    1.什么是placeholder?    placeholder是html5新增的一个属性,当input或者textarea设置了该属性后,该值的内容将作为灰字提示显示在文本框中,当文本框获得焦点(或 ...

  10. 低版本Firefox支持innerText属性兼容方法

    FireFox支持innerText属性了,很遗憾是44.0.2版本以下还需要兼容处理. 方法一: innerHTML是符合W3C标准的属性,而innerText只适用于IE浏览器,因此,尽可能地去使 ...

随机推荐

  1. 为什么applicationContext.xml和spring-servlet.xml中都有注解过滤<context:component-scan base-package="myproject"> 和<context:component-scan base-package="myproject.controller" />

    在刚学习SpringMVC框架整合时,你也许会产生疑问为什么Spring.xml和SpringMVC.xml中都有注解过滤. <context:component-scan base-packa ...

  2. Java多线程--让主线程等待子线程执行完毕

    使用Java多线程编程时经常遇到主线程需要等待子线程执行完成以后才能继续执行,那么接下来介绍一种简单的方式使主线程等待. java.util.concurrent.CountDownLatch 使用c ...

  3. 【开源】C#跨平台物联网通讯框架ServerSuperIO（SSIO）

    [连载]<C#通讯(串口和网络)框架的设计与实现>-1.通讯框架介绍 [连载]<C#通讯(串口和网络)框架的设计与实现>-2.框架的总体设计 目       录 C#跨平台物联 ...

  4. 开源跨平台IOT通讯框架ServerSuperIO，集成到NuGet程序包管理器，以及Demo使用说明

          物联网涉及到各种设备.各种传感器.各种数据源.各种协议,并且很难统一,那么就要有一个结构性的框架解决这些问题.SSIO就是根据时代发展的阶段和现实实际情况的结合产物. 各种数据信息,如下图 ...

  5. CodeSmith7 系列 破解教程

    CodeSmith[点此下载] 学过三层的人应该认识CodeSmith Generator吧,今天我就跟大家一起探讨下CodeSmith Generator 7.0.2的激活,这最新版本破解的难度也是 ...

  6. JavaScript 字符串操作

    JavaScript 字符串用于存储和处理文本.因此在编写 JS 代码之时她总如影随形,在你处理用户的输入数据的时候,在读取或设置 DOM 对象的属性时,在操作 Cookie 时,在转换各种不同 Da ...

  7. 【转】iOS UIApplication详解

    1.状态栏UIStateBar的设置是在UIApplication里面设置的,它包含4中风格 2. - (void)beginIgnoringInteractionEvents; (void)endI ...

  8. [Erlang 0123] Erlang EPMD

     epmd进程和Erlang节点进程如影随形,在Rabbitmq集群,Ejabberd集群,Couchbase集群产品文档中都会有相当多的内容讲epmd,epmd是什么呢?   epmd 是Erlan ...

  9. SQLite使用(二)&&数据类型

    1.概述 我们熟知的数据库引擎大部分采用静态数据类型,即列定义的类型定义了值的存储,并且值要严格满足列的定义,同一列所有值的存储方式都相同,比如定义了一个列类型为整型 int,不能在该列上输入'abc ...

  10. MySQL函数

    MySQL数据库提供了很多函数包括: 数学函数: 字符串函数: 日期和时间函数: 条件判断函数: 系统信息函数: 加密函数: 格式化函数: 一.数学函数 数学函数主要用于处理数字,包括整型.浮点数等. ...