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浏览器,因此,尽可能地去使 ...
随机推荐
- php mail 函数发送邮件
当然你可以通过php ,在自己的站点制作一个反馈表单, 我这次的需求是用email 的形式发送数据报表,结构比较简单 // 收件人地址(此处只可以写一个地址,写多个地址,只有最后一个地址生效) $to ...
- PHP 适配器模式
适配器模式(Adapter)模式:将一个类的接口,转换成客户期望的另一个类的接口.适配器让原本接口不兼容的类可以合作无间. [适配器模式中主要角色]目标(Target)角色:定义客户端使用的与 ...
- 5.2 Array类型介绍
Array类型是数组类型,Array(数组)类型也是引用类型中的一种. js 数组中的每一项可以保存任何类型的数据. js数组的大小/长度是可以动态调整的.如果你往数组中添加数据,数组长度会自动增加. ...
- javascript代码 调试方法
你的代码可能包含语法错误,逻辑错误,如果没有调试工具,这些错误比较难于发现. 通常,如果 JavaScript 出现错误,是不会有提示信息,这样你就无法找到代码错误的位置. 在程序代码中寻找错误叫做代 ...
- 自己实现一个简易web服务器
一个web服务器是网络应用中最基础的环节. 构建需要理解三个内容: 1.http协议 2.socket类 3.服务端实现原理 1.1 HTTP http请求 一般一个http请求包括以下三个部分: 1 ...
- Ext JS - 问答
Ext JS - 问答 在下面你将可以找到关于Ext JS 的最常见问题的答复.如果没有找到您所需的答复,请访问 Ext JS 论坛或者提交一个支持申请. 如果你确信你的问题可以对本页有补充,请让我们 ...
- Node.js 教程 04 - 模块系统
前言: Node.js的模块系统类似于C/C++的文件引用,可以声明对象,也可以定义类 创建对象. 大家这么理解,就简单了. 定义: 为了让Node.js的文件可以相互调用,Node.js提供了一个简 ...
- mysql 常用自定义函数解析
-- /* -- * 用于获取一记录数据,根据传入的分隔字符delim,索引位置pos,返回相对应的value -- * SELECT Json_getKeyValue({"A": ...
- JS二分查找
二分法查找,也称折半查找,是一种在有序数组中查找特定元素的搜索算法.查找过程可以分为以下步骤:(1)首先,从有序数组的中间的元素开始搜索,如果该元素正好是目标元素(即要查找的元素),则搜索过程结束,否 ...
- 机器学习实战笔记(Python实现)-03-朴素贝叶斯
--------------------------------------------------------------------------------------- 本系列文章为<机器 ...