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浏览器,因此,尽可能地去使 ...
随机推荐
- JVM 架构解读
每个Java开发人员都知道字节码由JRE(Java运行时环境)执行.但许多人不知道JRE是Java Virtual Machine(JVM)的实现,它分析字节码,解释代码并执行它.作为开发人员,我们应 ...
- 使用 SSH上传安装tomcat
开发步骤: 1.在soft文件夹下上传tomcat 2.[root@localhost soft]# tar -zxvf apache-tomcat-7.0.61.tar.gz //解压安装 ...
- Python 操作 MS Excel 文件
利用 Python 对 Excel 文件进行操作需要使用第三方库: openpyxl,可执行 pip install openpyxl 进行安装 1. 导入 openpyxl 模块 导入 openpy ...
- 建造者模式组装mybatis参数Example（）
参考:github, https://github.com/liuxiaochen0625/MyBatis-Spring-Boot-master.git 从controller组装tk.mybat ...
- 【JS基础】DOM操作
appendChild() //向节点添加最后一个子节点 createElement() //创建元素节点 createTextNode() //创建文本节点,字符串值
- datatables中的Options总结(3)
datatables中的Options总结(3) 十.ColReorder colReorder.fixedColumnsLeft 不允许x列重新排序(从左数) colReorder.fixedCol ...
- 《Web开发中块级元素与行内元素的区分》
一.块级元素的特性: 占据一整行,总是重起一行并且后面的元素也必须另起一行显示. HTML中块级元素列举如下: address(联系方式信息) article(文章内容) aside(伴随内容) au ...
- iOS - NSMutableAttributedString富文本的实现
NSMutableAttributedString继承于NSAttributedString(带属性的字符串)能够简单快速实现富文本的效果;不多说直接上效果图和代码,通俗易懂: (一)效果图: (二) ...
- 易企秀微场景2016最新完整版V10.5,小编亲测修复众多错误
易企秀V10.5更新说明1.修复拨号英文错误2.修复转送场景问题3.修复设置场景密码乱码问题4.修复前台批量删除客户图片5.修复数据收集分页问题6.修复图片分类错乱问题7.修复音乐和特效冲突问题8.修 ...
- 最新GHOST XP系统下载旗舰增强版 V2016年
系统来自:系统妈:http://www.xitongma.com 深度技术GHOST xp系统旗舰增强版 V2016年3月 系统概述 深度技术ghost xp系统旗舰增强版集合微软JAVA虚拟机IE插 ...