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浏览器,因此,尽可能地去使 ...
随机推荐
- sessionStorage 和 localStorage 、cookie
sessionStorage 和 localStorage html5中web storage包括两种储存方式:sessionStorage 和 localStorage sessionStorage ...
- canvas调用scale或者drawImage图片操作后，锯齿感很明显的解决
<script type="text/javascript"> //解决canvas画画图片 var mengvalue = -1; var phoneWidth = ...
- 调试关于Hibernate的程序遇到的问题
最怕的就是初学一些东西,低级的错误犯了又犯,现在总结出来以便以后不要再犯类似的错误. 一.Hibernate的延迟加载机制 在用hibernate底层访问数据库的过程忽略了延迟加载机制导致 在访问时候 ...
- Threejs中的材质贴图
最近项目需要折腾three.js,有关three.js几点说明 1.作用 threejs适合创建简单的模型视图 2.对于复杂的模型图(如:室内模型图)需要美术3D制作,前端导成特定格式文件(如*.mt ...
- wamp 服务器安装问题 及cmd常用命令 和 php mysql数据库常用cmd命令集
1 官网下载wamp软件包,根据提示安装 2 目录结构: wamp: bin/为套件目录 包括mysql apache php log 日志记录 alias 配置 apps 数据库 ...
- Web 开发中很实用的10个效果【附源码下载】
在工作中,我们可能会用到各种交互效果.而这些效果在平常翻看文章的时候碰到很多,但是一时半会又想不起来在哪,所以养成知识整理的习惯是很有必要的.这篇文章给大家推荐10个在 Web 开发中很有用的效果,记 ...
- View and Data API Tips: Hide elements in viewer completely
By Daniel Du With View and Data API, you can hide some elements in viewer by calling "viewer.hi ...
- GreenDao3.0新特性解析（配置、注解、加密）
Greendao3.0release与7月6日发布,其中最主要的三大改变就是:1.换包名 2.实体注解 3.加密支持的优化 本文里面会遇到一些代码示例,就摘了官方文档和demo里的例子了,因为他们的例 ...
- 关于iPhone图片的问题。
由于iOS设备的屏幕分辨率不尽相同,有大有小,那么在不同设备中显示同一张图片,可能会造成图片被拉伸.变形,严重影响用户体验.为了让图片在不同设备中都能得到很好的显示效果,同一类图片我们一般会准备几种版 ...
- get和post的区别
http://localhost:8080/shopc/check.do?username=zhangsan&pwd=123456 http://localhost:8080/shopc/ch ...