IE 兼容性写法
2024-10-15 12:52:09
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/
最新文章
- web视频添加webvtt字幕测试
- polya/burnside 学习
- MyBaits使用小结
- Java程序员的日常 —— 多进程开发IO阻塞问题
- jquery基本选择器(.class选择器)
- KMP算法学习
- ubuntu解决libstdc++.so.6: cannot open shared object file: No such file or directory：问题
- 如何在Eclipse卸载之前添加的android 的 ADT
- Symantec Antivirus (SAV) for Linux Installation Checklist
- linux设备驱动归纳总结（十三）：1.触摸屏与ADC时钟【转】
- V-rep学习笔记：曲柄摇杆机构
- iptables的recent模块
- git shell 中文
- crontab无法调用java的问题解决
- 第三十八篇、给UITabBar按钮的动画效果
- 接收对 http://192.168.1.18:8001/ObtainData/Service 的 HTTP 响应时发生错误。这可能是由于服务终结点绑定未使用 HTTP 协议造成的。这还可能是由于服务器中止了 HTTP 请求上下文(可能由于服务关闭)所致。
- Codeforces 432E Square Tiling(结构体+贪婪)
- chrome disable-web-security 关闭安全策略 解决跨域
- 51NOD 1821 最优集合 [并查集]
- ajax常见的面试题