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

  1.     _XXX:XXX; /* IE6支持 */
  2.     *XXX:XXX; /* IE6、IE7支持 */
  3.     *+XXX:XXX; /* IE7支持 */
  4.     XXX:XXX\9; /* IE6、IE7、IE8支持 */
  5.     XXX:XXX\0; /* IE8支持 */
  7.     创建条件样式表，并在HTML中body里添加相应的class类名：
  9.     <!–[if IE6]–>
  10.     <!–[if IE7]–>
  11.     <!–[if IE8]–>
  12.     <!–[if IE9]–>
  13.     <!–[if !IE]–>

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

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

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

Github ：

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

腾讯云 ：

  1. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  3. <!--[if IE 8 ]>
  4.     <body class="ie8">
  5. <![endif]-->
  7. <!--[if lt IE 8]>
  8.     <link href="//imgcache.qq.com/qcloud/mc/css/ie67sucks.min.css" rel="stylesheet" />
  9.     <script src="//imgcache.qq.com/qcloud/mc/ie67sucks.min.js?v=20150331"></script>
  10. <![endif]-->

百度 ：

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

npm ：

  1. <!--[if lt IE 9]>
  2.     <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.2/html5shiv.min.js"></script>
  3. <![endif]-->

GitLab ：

  1. <!--[if lt IE 9]>
  2.     <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
  3. <![endif]-->

知乎 ：

  1. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  2. <!--[if lt IE 9]>
  3. <script src="https://static.zhihu.com/static/components/respond/dest/respond.min.js"></script>
  4. <link href="https://static.zhihu.com/static/components/respond/cross-domain/respond-proxy.html" id="respond-proxy" rel="respond-proxy" />
  5. <script src="/static/components/respond/cross-domain/respond.proxy.js"></script>
  6. <![endif]-->

…………

大多部分都引用了

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

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

function(){

  1. var patterns = {
  2.     text: /^['"]?(.+?)["']?$/,
  3.     url: /^url\(["']?(.+?)['"]?\)$/
  4. };
  6. function clean(content) {
  7.     if(content && content.length) {
  8.         var text = content.match(patterns.text)[1],
  9.             url = text.match(patterns.url);
  10.         return url ? '<img src="' + url[1] + '" />': text;
  11.     }
  12. }
  14. function inject(prop, elem, content) {
  15.     if(prop != 'after') prop = 'before';
  16.     if(content = clean(elem.currentStyle[prop])) {
  17.         $(elem)[prop == 'before' ? 'prepend' : 'append'](
  18.             $(document.createElement('span')).addClass(prop).html(content)
  19.         );
  20.     }
  21. }
  23. $.pseudo = function(elem) {
  24.     inject('before', elem);
  25.     inject('after', elem);
  26.     elem.runtimeStyle.behavior = null;
  27. };
  29. if(document.createStyleSheet) {
  30.     var o = document.createStyleSheet(null, 0);
  31.     o.addRule('.dummy','display: static;');
  32.     o.cssText = 'html, head, head *, body, *.before, *.after, *.before *, *.after * { behavior: none; } * { behavior: expression($.pseudo(this)); }';
  33. }

};

各浏览器CSS兼容代码：

Firefox

  1. @-moz-document url-prefix() {
  2.     .css {
  3.         color:lime;
  4.     }
  5. }
  7. 支持Firefox的还有几种写法：
  9. /* 支持所有firefox版本 */ 
  11.     #selector[id=selector] {
  12.         color: white;
  13.     } 
  15. 或者： 
  17. @-moz-document url-prefix() {
  18.     .css {
  19.         color: white;
  20.     }
  21. } 
  23. /* 支持所有Gecko内核的浏览器 (包括Firefox) */
  25.  *>.css {
  26.     color: white;
  27.  }

Webkit枘核(chrome and safari)

  1. @media screen and (-webkit-min-device-pixel-ratio:0) {
  2.     .css {
  3.         color: white;
  4.     }
  5. }
  7. 上面写法主要是针对Webkit内核的浏览器，如Google Chrome 和 Safari浏览器

Opera

  1. html:first-child>body .css {
  2.     color:white;
  3. } 
  5. 或者： 
  7. @media all and (min-width:0) {
  8.     .css {
  9.         color: white;
  10.     }
  11. } 
  13. 或者： 
  15. @media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) {
  16.     head~body .css {
  17.         color: white;
  18.     }
  19. }

IE9

  1. :root .css {
  2.     color: white9;
  3. }
  5. IE9+都能够兼容

IE8

  1. .css {
  2.     color: white/;
  3. }
  5.  或者： 
  7. @media ?screen{
  8.     .css {
  9.         color: white;
  10.     }
  11. }
  13. IE8+都能够兼容

IE7

  1. *+html .css{
  2.     color:white;
  3. } 
  5. 或 
  7. *:first-child+html .css {
  8.     color:white;
  9. }
  11. 只兼容IE7

IE6

  1. .css {
  2.     _property/**/:/**/white;
  3. } 
  5. 或者： 
  7. .css {
  8.     _property: white;
  9. } 
  11. 或者：
  13. *html .css {
  14.     color: white;
  15. }
  17. 只兼容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

  1. _XXX: XXX; / * IE6 support * /
  2. * XXX: XXX; / * IE6, IE7 support * /
  3. * + XXX: XXX; / * IE7 * Support /
  4. XXX: XXX \ 9; / * IE6, IE7, IE8 support * /
  5. XXX: XXX \ 0; / * IE8 support * /

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

  1. <-! [If IE6] ->
  2. <-! [If IE7] ->
  3. <-! [If IE8] ->
  4. <-! [If IE9] ->
  5. <-! [! 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:

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

Tencent says:

  1. <Meta http-equiv = "X-UA-Compatible" content = "IE = edge">
  3. <-! [If IE 8]>
  4. <Body class = "ie8">
  5. <! [Endif] ->
  7. <-! [If lt IE 8]>
  8. <Link href = "// imgcache.qq.com/qcloud/mc/css/ie67sucks.min.css" rel = "stylesheet" />
  9. <Script src = "// imgcache.qq.com/qcloud/mc/ie67sucks.min.js?v=20150331"> </ script>
  10. <! [Endif] ->

Baidu:

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

npm:

  1. <-! [If lt IE 9]>
  2.     <Script src = "// cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.2/html5shiv.min.js"> </ script>
  3. <! [Endif] ->

GitLab:

  1. <-! [If lt IE 9]>
  2. <Script src = "http://html5shim.googlecode.com/svn/trunk/html5.js"> </ script>
  3. <! [Endif] ->

Know almost :

  1. <Meta http-equiv = "X-UA-Compatible" content = "IE = edge, chrome = 1">
  2. <-! [If lt IE 9]>
  3. <Script src = "https://static.zhihu.com/static/components/respond/dest/respond.min.js"> </ script>
  4. <Link href = "https://static.zhihu.com/static/components/respond/cross-domain/respond-proxy.html" id = "respond-proxy" rel = "respond-proxy" />
  5. <Script src = "/ static / components / respond / cross-domain / respond.proxy.js"> </ script>
  6. <! [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. 5分钟创建一个SpringBoot + Themeleaf的HelloWord应用

    第一步:用IDE创建一个普通maven工程,我用的eclipse. 第二步:修改pom.xml,加入支持SpringBoot和Themeleaf的依赖,文件内容如下: <?xml version ...

  2. 时隔两个月再写的Echarts（Enterprise Charts，商业级数据图表）一文

    简介 ECharts,缩写来自Enterprise Charts,商业级数据图表,一个纯Javascript的图表库,可以流畅的运行在PC和移动设备上,兼容当前绝大部分浏览器(IE6/7/8/9/10 ...

  3. instanceof 运算符

    java中的instanceof=======>二元运算符 用法: result = object instanceof class 参数: result 是boolean类型 object 是 ...

  4. ThinkPHP 整合Bootstrap Ajax分页

    ThinkPHP Ajax分页代码 publicfunction index() { $where=array(); $name = I('name'); if(!empty($name)){ $wh ...

  5. javascript实现键盘自动打字效果

    最近在网上看到一个字符逐个出现的打字效果,觉得挺有趣的,想一想基本实现思路就是设置一个定时器逐然后逐个向容器中添加字符,于是就基于jQuery写了一个简单版的. <!DOCTYPE html&g ...

  6. 关于css3的背景渐变

    关于css3的渐变,目前各大浏览器还未做到很好的支持,所以需要在我们使用时加上各大浏览器前缀. -moz-:使用Mozilla内核的浏览器(Firefox浏览器) -webkit-:使用Webkit内 ...

  7. 【转】推荐10款最热门jQuery UI框架

    推荐10款最热门jQuery UI框架 原创 在进行Web开发时,并非所有的库都适合你的项目,但你仍需要收藏一些Web UI设计相关的库或框架,以在你需要的时候,加快你的开发效率.本文为你推荐10款非 ...

  8. 在Outlook中查看预览SharePoint文档库的文档

    本文概况 阅读时间: 约2分钟 适用版本:SharePoint Server 2010及以上 面向用户:普通用户,管理员 难度指数:★★☆☆☆ 在日常工作中,总有一些常用的文档需要经常打开查看,其实我 ...

  9. Eclipse背景颜色设置（设置成豆沙绿色保护眼睛，码农保护色）

    菜单栏windows–>preferences–>general–>editors–>text editors中在Appearance color options下修改 bac ...

  10. C# 在Repeater 的ItemDataBound 如何转换e.Item.DataItem 的类型

    1.使用DataSet和DataTable绑定数据源时,用 DataRowView view = (DataRowView)e.Item.DataItem; 2.DataReader绑定数据源时,用 ...