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浏览器,因此,尽可能地去使 ...
随机推荐
- elasticsearch高级配置一 ---- 分片分布规则设置
cluster.routing.allocation.allow_rebalance 设置根据集群中机器的状态来重新分配分片,可以设置为always, indices_primaries_active ...
- Atitit.java c#.net php项目中的view复用（jsp，aspx，php的复用）
Atitit.java c#.net php项目中的view复用(jsp,aspx,php的复用) 1.1. Keyword1 1.2. 前言1 2. Java项目使用.Net的aspx页面view1 ...
- atitit.日期,星期,时候的显示方法ISO 8601标准
atitit.日期,星期,时候的显示方法ISO 8601标准 1. ISO 86011 2. DAte日期的显示1 2.1. Normal1 2.2. 顺序日期表示法(可以将一年内的天数直接表示)1 ...
- Web Worker javascript多线程编程（二）
Web Worker javascript多线程编程(一)中提到有两种Web Worker:专用线程dedicated web worker,以及共享线程shared web worker.不过主要讲 ...
- CentOS7中安装Python3.5
1.下载 https://www.python.org/ftp/python/3.5.2/Python-3.5.2.tgz 2.上传到服务器 3. 安装相关依赖 yum install gcc ope ...
- ViewPager之Fragment页面切换
一.概述 ViewPager是android-support-v4中提供的类,它是一个容器类,常用于页面之间的切换. 继上篇文章<ViewPager之引导页>之后,本文主要介绍ViewPa ...
- 获取View的截图-将View转换为Bitmap对象
开发中,有时候需要获取View的截图来做动画来达到动画流程的目的 原理:将View的内容画到一个Bitmap画布上,然后取出 下面封装了一个从View生成Bitmap的工具类 /** * 将View转 ...
- 前端开发--ppt展示页面跳转逻辑实现
1. 工程地址:https://github.com/digitalClass/web_page 网站发布地址: http://115.28.30.25:8029/ 2. 今天遇到一个小问题, 同组的 ...
- Linux下Session丢失原因
最近碰到一个问题,把代码迁移到linux系统下,重新搭建php环境,运行代码, 在登录页面时,不能访问后台,会返回到登录页面,对代码测试,没有报任何错误, 最后检查到是跳转时,session丢失的问题 ...
- struts2中各个jar包作用
Struts2.3.4 所需的Jar包及介绍 Jar包的分类 jar包名称 jar包版本 jar包 文件名 jar包 的作用 jar包内包含的主要包路径及主要类 依赖的自有jar包名称 依赖的第三方j ...