IE兼容方法

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

    _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兼容方法的更多相关文章

placeholder兼容方法（兼容IE8以上浏览器）
//placeholder兼容方法(兼容IE8以上浏览器) var JPlaceHolder = { //检测 _check: function () { return 'placeholder' i ...
JS--事件对象中部份浏览器不兼容方法
测试时主要用的浏览器是Firefox 28.0.IE11.IE8.Chrome 34.0 一.什么是事件对象:当触发某个事件的时候,会产生一个事件对象,这个对象包含着所有的与事件有关的信息,包括导致 ...
AJAX原理解析与兼容方法封装
AJAX常用参数 AJAX对象兼容 AJAX对象方法与属性 AJAX封装兼容方法源码 AJAX全称Asynchronous JavaScript and XML(异步的JavaScript与XML), ...
CSS模糊效果及其兼容方法
今天在整理IE滤镜时网站访问这里,居然找到模糊滤镜blur(),感觉太不可思议了,想不到IE居然会有这么多种滤镜效果,这基本上是模仿PS的.今天的重点是模糊滤镜 CSS模糊效果及其兼容方法实例兼容 ...
CSS3新特性，兼容性，兼容方法总结
css3手册css3手册边框 border-radius 用于添加圆角效果语法: border-radius:[ <length> | <percentage> ]{1,4 ...
bind()函数的深入理解及两种兼容方法分析
在JavaScript中,bind()函数仅在IE9+.Firefox4+.Chrome.Safari5.1+可得到原生支持.本文将深入探讨bind()函数并对两种兼容方法进行分析比较.由于本文将反复 ...
placeholder在不同浏览器下的表现及兼容方法
1.什么是placeholder? placeholder是html5新增的一个属性,当input或者textarea设置了该属性后,该值的内容将作为灰字提示显示在文本框中,当文本框获得焦点(或 ...
placeholder在不同浏览器下的表现及兼容方法（转）
1.什么是placeholder? placeholder是html5新增的一个属性,当input或者textarea设置了该属性后,该值的内容将作为灰字提示显示在文本框中,当文本框获得焦点(或 ...
placeholder在不同浏览器下的表现及兼容方法 placeholder兼容
1.什么是placeholder? placeholder是html5新增的一个属性,当input或者textarea设置了该属性后,该值的内容将作为灰字提示显示在文本框中,当文本框获得焦点(或 ...
低版本Firefox支持innerText属性兼容方法
FireFox支持innerText属性了,很遗憾是44.0.2版本以下还需要兼容处理. 方法一: innerHTML是符合W3C标准的属性,而innerText只适用于IE浏览器,因此,尽可能地去使 ...

随机推荐

Microsoft.CodeAnalysis 入门
1 安装 Microsoft.CodeAnalysis 我这里创建的是WPF的项目,首先再VS2015中用NuGet控制台进行安装 Install-Package Microsoft.CodeAnal ...
react动画难写？试试react版transformjs
简介 transformjs在非react领域用得风生水起,那么react技术栈的同学能用上吗?答案是可以的.junexie童鞋已经造了个react版本. 动画实现方式传统 web 动画的两种方式: ...
深刻理解：C#中的委托、事件
C#中的事件还真是有点绕啊,以前用JavaScript的我,理解起来还真是废了好大劲!刚开始还真有点想不明白为什么这么绕,想想和JS的区别,最后终于恍然大悟! C#中事件绕的根本原因: C#的方法,它 ...
iscroll5实现一个下拉刷新上拉加载的效果
直接上代码!!! <!DOCTYPE html><html><head lang="en"> <meta charset="UT ...
便于开发的Helper类
一.将config封装实体层: 例子config: <?xml version="1.0" encoding="utf-8" ?> <Sett ...
Service是什么?Service又不是什么?
在Android王国中,Service是一个劳动模范,总是默默的在后台运行,无怨无悔,且总是干最脏最累的活,比如下载文件,倾听音乐,网络操作等这些耗时的操作,所以我们请尊重的叫他一声:"劳模 ...
h5上传图片及预览
第一次做图片上传,记录一些问题. 1,图片的base64编码就是可以将一副图片数据编码成一串字符串,使用该字符串代替图像地址.而网页上的每一个图片,都是需要消耗一个http请求下载而来的,使用base ...
es6
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
lucky 的时光助理
2017年的lucky小姐,厌倦了现在的工作,她觉得这些的工作对于她而言不具备挑战性,她在迷茫春节过后该如何选择, 这里是距她走出校门整整一年的时光. lucky小姐从开发走向了实施,目的是想周游这个 ...
0033 Java学习笔记-反射-初步1
先看看通过反射能干嘛示例:修改对象的private实例变量 package testpack; import java.lang.reflect.Field; public class Test1 ...

IE兼容方法

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

随机推荐

热门专题