IE 兼容性写法
1. 条件注释语句
<!--[if !IE]><!--> 除IE外都可识别 <!--<![endif]-->
<!--[if IE]> 所有的IE可识别 <![endif]-->
<!--[if IE 6]> 仅IE6可识别 <![endif]-->
<!--[if lt IE 6]> IE6以及IE6以下版本可识别 <![endif]-->
<!--[if gte IE 6]> IE6以及IE6以上版本可识别 <![endif]-->
<!--[if IE 7]> 仅IE7可识别 <![endif]-->
<!--[if lt IE 7]> IE7以及IE7以下版本可识别 <![endif]-->
<!--[if gte IE 7]> IE7以及IE7以上版本可识别 <![endif]-->
<!--[if IE 8]> 仅IE8可识别 <![endif]-->
<!--[if IE 9]> 仅IE9可识别 <![endif]-->
2. CSS hack 写法
/* 所有浏览器 通用*/
height: 100px; /* IE6 专用 */
_height: 100px; /* IE6 专用 */
*height: 100px; /* IE7 专用 */
*+height: 100px; /* IE7、FF 共用 */
height: 100px !important; /* IE6 7 8 9 10通用 */ height: 100px\9;
(1)*: IE6+IE7都能识别*,而标准浏览器FF+IE8是不能识别*的;
(2)!important: 除IE6不能识别 !important外, FF+IE8+IE7都能识别!important ;
(3)_ : 除IE6支持_ 外, FF+IE8+IE7都不支持_;
(4)\9:所有IE浏览器都识别(IE6、IE7、IE8、IE9)
.test{ /* 1. */
/* color:#09F\0; 以前是IE8/9, 现在10也支持 */
color:#09F\0/; /* 以前是IE8 only, 现在IE9/10也支持. 如要排除IE9需要使用下面的rule重设IE9样式 */
}
@media all and (min-width:0) { /* 2. */
.test{color:red\9; }/* IE9 only, 现在IE10也支持 */
/* Ps:老外的方法都是\0,根本没考虑Opera */
}
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { /* 3. */
.test { color: green; } /* IE10+ */
}
:root .test { color:#963\9; } /* 以前IE9 only, 现在10也支持, 优先级高于@media, 优先级太高, 尽量少用 */
3. 识别IE10
1) 特性检测:@cc_on
我们可以用IE私有的条件编译(conditional compilation)结合条件注释来提供针对ie10的Hack:该脚本里面的IE排除条件注释,以确保IE6-9不承认它,然后它功能检测到了名为@ cc_on。在这里:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<!--[if !IE]><!--<script>
if (/*@cc_on!@*/false) {
document.documentElement.className+=' ie10';
}
</script><!--<![endif]-->
</body>
</html>
用法
.ie10 .example {
/* IE10-only styles go here */
}
2)@media -ms-high-contrast
IE10支持媒体查询,然后也支持-ms-high-contrast这个属性,所以,我们可以用它来hack ie10:
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
/* IE10-specific styles go here */
}
3) @media 0
@media screen and (min-width:0\0) {
/* IE9 and IE10 rule sets go here */
}
参考:
http://feilong.org/ie7-ie8-ie6-firefox-css-hack
http://www.fantxi.com/blog/archives/ie8-ie9-css-hack/
http://www.wufangbo.com/ie10-css-hack/
IE 兼容性写法的更多相关文章
- 常用原生JS方法总结(兼容性写法)
经常会用到原生JS来写前端...但是原生JS的一些方法在适应各个浏览器的时候写法有的也不怎么一样的... 今天下班有点累... 就来总结一下简单的东西吧…… 备注:一下的方法都是包裹在一个EventU ...
- css各浏览器的兼容性写法
各浏览器下的兼容性写法 老版Chrome -webkit-xxx FF -moz-xxx IE9 -ms-xxx opera ...
- 常用原生JS兼容性写法汇总
1.添加事件方法 addHandler:function(element,type,handler){ if(element.addEventListener){//检测是否为DOM2级方法 elem ...
- Javascript selection的兼容性写法介绍
本文为大家讲解下Javascript selection的兼容性写法,感兴趣的朋友可以参考下 function getSelectedText() { //this function code is ...
- JavaScript数组方法的兼容性写法 汇总:indexOf()、forEach()、map()、filter()、some()、every()
ECMA Script5中数组方法如indexOf().forEach().map().filter().some()并不支持IE6-8,但是国内依然有一大部分用户使用IE6-8,而以上数组方法又确实 ...
- CSS- ie6,ie7,ie8 兼容性写法,CSS hack写法
css ie6,ie7,ie8 兼容性写法,CSS hack写法 margin-bottom:40px; /*ff的属性*/margin-bottom:140px\9; /* IE6 ...
- javascript解决getElementById()的bug以及getElementsByClassName的兼容性写法
<a name="target" href="#">链接</a> <p id="target">文字说明 ...
- js 的一些兼容性写法
①添加事件方法 addHandler:function(element,type,handler){ if(element.addEventListener){//检测是否为DOM2级方法 ...
- addEventListener和attachEvent介绍, 原生js和jquery的兼容性写法
也许很多同仁一听到事件监听,第一想到的就是原生js的 addEventListener()事件,的确如此,当然如果只是适用于现代浏览器(IE9.10.11 | ff, chorme, safari, ...
- JavaScript 事件兼容性写法
1.以下是JavaScript事件兼容性写法,使用者可以随意使用,兼容所有浏览器.包括IE6(亲测) <!DOCTYPE html> <html> <head> & ...
随机推荐
- make clean-kernel && make kernel
当在kernel下使用全编译指令后,回到主目录编译仍然有错,那么需要:在 kernel/include/config:删去该文件夹 make clean-kernel && make ...
- iTunes获取下载的安装包
打开iTunes, 偏好设置,选择高级,即可找到文件路径
- poj1961Period(next数组)
http://poj.org/problem?id=1961 对于next数组只能说略懂,其中精髓还是未完全领会 大体是本串相同前缀与后缀的最大长度,读不懂?看串abcdab 这里所说前缀与后缀都为a ...
- Android使用 LruCache 缓存图片
摘要:在你应用程序的UI界面加载一张图片是一件很简单的事情,但是当你需要在界面上加载一大堆图片的时候,情况就变得复杂起来. 使用图片缓存技术 在 你应用程序的UI界面加载一张图片是一件很简单的事情,但 ...
- [转]JAVA中Action层, Service层 ,modle层 和 Dao层的功能区分
首先这是现在最基本的分层方式,结合了SSH架构.modle层就是对应的数据库表的实体类.Dao层是使用了Hibernate连接数据库.操作数据库(增删改查).Service层:引用对应的Dao数据库操 ...
- Android 使Volley完美支持自定义证书的Https
其实在最早的版本里,Volley甚至是不支持https协议的,只能跑http,当然你也可以自己修改他的源码让他支持,如今volley的代码经过一些改进以后, 已经可以完美支持https协议了,无论是在 ...
- MYSQL BENCHMARK函数的使用
MYSQL BENCHMARK函数是最重要的函数之一,下文对该函数的使用进行了详尽的分析,如果您对此感兴趣的话,不妨一看. 下文为您介绍的是MYSQL BENCHMARK函数的语法,及一些MYSQL ...
- vhosts.conf
<VirtualHost *:80> ServerAdmin webmaster@dummy-host.example.com DocumentRoot "/opt/lampp/ ...
- 用 Javascript 获取页面大小、窗口大小和滚动条位置
页面大小.窗口大小和滚动条位置这三个数值在不同的浏览器例如 Firefox 和 IE 中有着不同的实现.即使在同一种浏览器例如 IE 中,不同版本也有不同的实现. 本文给出两个能兼容目前所有浏览器的 ...
- hdu 1541 Stars(树状数组)
题意:求坐标0到x间的点的个数 思路:树状数组,主要是转化,根据题意的输入顺序,保证了等级的升序,可以直接求出和即当前等级的点的个数,然后在把这个点加入即可. 注意:树状数组下标从1开始(下标为0的话 ...