IE的if条件Hack1. 〈!--[if !IE]〉〈!--〉 除IE外都可识别 〈!--〈![endif]--〉 2. 〈!--[if IE]〉 所有的IE可识别 〈![endif]--〉 3. 〈!--[if IE 5.0]〉 只有IE5.0可以识别 〈![endif]--〉 4. 〈!--[if IE 5]〉 仅IE5.0与IE5.5可以识别 〈![endif]--〉 5. 〈!--[if gt IE 5.0]〉 IE5.0以及IE5.0以上版本都可以识别 〈![endif]--〉 6. 〈!--[if IE 6]〉 仅IE6可识别 〈![endif]--〉 7. 〈!--[if lt IE 6]〉 IE6以及IE6以下版本可识别 〈![endif]--〉 8. 〈!--[if gte IE 6]〉 IE6以及IE6以上版本可识别 〈![endif]--〉 9. 〈!--[if IE 7]〉 仅IE7可识别 〈![endif]--〉 10. 〈!--[if lt IE 7]〉 IE7以及IE7以下版本可识别 〈![endif]--〉 11. 〈!--[if gte IE 7]〉 IE7以及IE7以上版本可识别 〈![endif]--〉注:gt = Great Then 大于 > = > 大于号 lt = Less Then 小于 < = < 小于号 gte = Great Then or Equal 大于或等于lte = Less Then or Equal 小于或等于
以前对 IE9 以下兼容方法是直接在 HTML 的 head 头里面放个 IE 的兼容模式代码
<meta http-equiv = "X-UA-Compatible" content = "IE=EmulateIE7,IE=EmulateIE9" />
这样做就只需要兼容IE6,IE7。但是无法通过 W3C 验证的,还有些其他的缺陷,总觉得不太好,所以放弃了。 注意若要用此设置是不能通过 IE 特有的 HTML 浏览器判断语法的来控制的,如:
<!--[if lt IE 9]><meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /><![endif]-->
这样写是没有用处的,而且必须是放在 head 的头部否则也不会识别
CSS兼容方法
仅 IE6 和 IE7 识别,使用 * 星号
仅 IE6 识别,使用 _ 下划线区别
仅 IE7 识别,使用 + 加号
仅 IE8 和 IE9 识别,使用 \0 符号
仅 IE9 识别,使用 \9\0 ,同上, 多次测试后发现无效,后面有补充
仅 IE6 不能识别: !important ,
全部 IE 均可识别 \9 ,
使用顺序
#test { color : green !important ; color : #EEE ; color : #0F0 \ 9 ; color : #09F \ 0 ; color : #F00 \ 9 \ 0 ; * color : #000000 ; + color : #630 ; _ color : #FF0 ; }
针对IE9兼容之前的写法有问题
:root #test { color : #F00 \ 0 ;}
这次测试发现貌似只有这样写才能真正的只让 IE9 识别
以上CSS将在 ie6 中显示 #FF0 颜色, IE6以上版本和 chrome、firefox 中显示 green,
去除 !important 后
IE6, 显示 #FF0
IE7, 显示 #630
IE8, 显示 #09F
IE9, 显示 #F00
chrome、firefox 中显示 #EEE ,
以上的各种特殊符号对浏览器兼容基本上就够了,唯一缺憾是无法区别 chrome 和 firefox,不过还好他们两个的样式基本上差不多的,对于一些特殊的 css 属性可以添加各浏览器私有的属性前缀进行区别,但仅限部分样式有效
-webkit- Chrome ...
-moz- Firefox
-ms- Microsoft
-o- Opera