万恶的IE,但总算有个解决的方法。以前我也看别人的博客中说过,写CSS不一定非要兼容IE所有版本,最多也就是兼容它主流的一两种版本。我也是这个见解,再说了,也不是人人都用IE的,虽然它很牛,但这是中国。360浏览器、QQ浏览器等,虽然使用得也是IE的内核,但是在显示方面是与IE有所区别的,当然,在网站开发中,还是使用火狐为主开发浏览器的,最主要的是他的执行标准还是相对标准的;还有一点,是个人偏好问题,喜欢他自带的开发工具,已经是习惯了。
方法一:
<!--[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]-->
方法二:
<!DOCTYPE html>
<!--[if IE 6 ]> <html class="ie6 lte_ie6 lte_ie7 lte_ie8" lang="zh-CN"> <![endif]-->
<!--[if lte IE 6 ]> <html class="lte_ie6 lte_ie7 lte_ie8" lang="zh-CN"> <![endif]-->
<!--[if lte IE 7 ]> <html class="lte_ie7 lte_ie8" lang="zh-CN"> <![endif]-->
<!--[if lte IE 8 ]> <html class="lte_ie8" lang="zh-CN"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--><html lang="zh-CN"><!--<![endif]-->
实例:IE6及以上版本引入ie.css,增加在head区。
<!--[if gte IE 6]><link href="css/ie.css" rel='stylesheet' type='text/css' /><![endif]-->
<!--[if gte IE 6]><style>.body{margin:0;padding:0}......</style><![endif]-->
<!--[if IE 6]> <html id="ie6" lang="zh-CN"> <![endif]-->
个人还是喜欢使用IE可识别标签引入CSS的方法,html页面不至于看着很乱,如果CSS代码不多,也可以直接写在html中,实例中的第三种方法是最不建议使用的,写出来只为了了解,它会造成大量的HTTP请求。
**************************************************************
CSS hack由于不同的浏览器,比如Internet Explorer 6,Internet Explorer 7,Mozilla firefox等,对CSS的解析认识不一样,因此会导致生成的页面效果不一样,得不到我们所需要的页面效果。 这个时候我们就需要针对不同的浏览器去写不同的CSS,让它能够同时兼容不同的浏览器,能在不同的浏览器中也能得到我们想要的页面效果。
这个针对不同的浏览器写不同的CSS code的过程,就叫CSS hack!
目前IE内核浏览器仍然是国内主流浏览器,占据着PC浏览器的大部分市场份额,版本从IE6到IE10,所有前段工作者都必须面对和解决多个ie浏览器对代码的兼容性问题。在很多情况下,我们需要专门针对IE写css样式,即针对IE的css hack,下面将详细介绍这些内容:
1、常见的特殊符号的应用:
IE6:
_selector{property:value;}
selector{property:value;property:value !important;} //IE6 不支持同一选择符中的 !important
IE7:
+selector{property:value;}
IE8:
selector{property:value\0;}
IE6 & IE7:
*selector{property:value;}
IE6 & IE7 & IE8:
selector{property:value\9;}
总结起来,如下:
其中,S表示Standards Mode即标准模式,Q表示Quirks Mode,即兼容模式。
(了解更多Quirks模式、Strict(Standars)模式?)
hack |
示例 |
IE6(S) |
IE6(Q) |
IE7(S) |
IE7(Q) |
IE8(S) |
IE8(Q) |
* |
*color |
Yes |
Yes |
Yes |
Yes |
No |
Yes |
+ |
+color |
Yes |
Yes |
Yes |
Yes |
No |
Yes |
- |
-color |
Yes |
Yes |
No |
No |
No |
No |
_ |
_color |
Yes |
Yes |
No |
Yes |
No |
Yes |
# |
#color |
Yes |
Yes |
Yes |
Yes |
No |
Yes |
\0 |
color\0 |
No |
No |
No |
No |
Yes |
No |
\9 |
color\9 |
Yes |
Yes |
Yes |
Yes |
Yes |
Yes |
!important |
color:blue !important;
color:green; |
No |
No |
Yes |
No |
Yes |
No |
2、条件注释语句(<!–[if IE]> <![endif]–>)
所有的IE可识别
仅IE6可识别
IE6以及IE6以上版本可识别
IE7以下版本可识别
lt 表示less than 当前条件版本以下的版本,不包含当前版本。
gte 表示greeter than or equal 当前版本以上版本,并包含当前版本。
lte 表示less than or equal 当前版本以下版本,并包含当前版本。
3、meta声明
由于IE8 可能会将页面按照 IE7 模式进行渲染,针对 多版本IE的现状,通常会采用设置 X-UA-Compatible HTTP 头的方式将页面在IE中采用统一的渲染模式。
4、其他(/*\**/注释法)
网上也流传着这样一种ie hack方法
.color1{ color:#F00; color/*\**/:#00F /*\**/}/*IE6,IE7,IE8,FF,OP,SA识别*/
.color2{ color:#F00; color /*\**/:#00F /*\9**/}/*IE7,IE8,FF,OP,SA识别*/
.color3{ color:#F00; color/*\**/:#00F \9}/*IE6,IE7,IE8识别*/
.color4{ color:#F00; color /*\**/:#00F\9}/*IE7,IE8识别*//*“color”和“/*\**/”之间有个空格*/
分析下:
background-color:blue; 各个浏览器都认识,这里给firefox用;
background-color:red\9;\9所有的ie浏览器可识别;
background-color:yellow\0; \0 是留给ie8的,但笔者测试,发现最新版opera也认识,汗。。。不过且慢,后面自有hack写了给opera认的,所以,\0我们就认为是给ie8留的;
+background-color:pink; + ie7定了;
_background-color:orange; _专门留给神奇的ie6;
:root #test { background-color:purple\9; } :root是给ie9的,网上流传了个版本是 :root #test { background-color:purple\0;},呃。。。这个。。。,新版opera也认识,所以经笔者反复验证最终ie9特有的为:root 选择符 {属性\9;}
@media all and (min-width:0px){ #test {background-color:black\0;} } 这个是老是跟ie抢着认\0的神奇的opera,必须加个\0,不然firefox,chrome,safari也都认识。。。
@media screen and (-webkit-min-device-pixel-ratio:0){ #test {background-color:gray;} }最后这个是浏览器新贵chrome和safari的。
好了就这么多了,特别注意以上顺序是不可以改变的。css hack虽然可以解决个浏览器之间css显示的差异问题,但是毕竟不符合W3C规范,我们平时写css最好是按照标准来,这样对我们以后维护也是大有好处的,实在不行再用。
区别不同浏览器的CSS hack写法:
区别IE6与FF:
background:orange;*background:blue;
区别IE6与IE7:
background:green !important;background:blue;
区别IE7与FF:
background:orange; *background:green;
区别FF,IE7,IE6:
background:orange;*background:green !important;*background:blue;
注:IE都能识别*;标准浏览器(如FF)不能识别*;
IE6能识别*,但不能识别 !important,
IE7能识别*,也能识别!important;
FF不能识别*,但能识别!important;
|
IE6 |
IE7 |
FF |
* |
√ |
√ |
× |
!important |
× |
√ |
√ |
——————————————————
另外再补充一个,下划线”_”,
IE6支持下划线,IE7和firefox均不支持下划线。
|
IE6 |
IE7 |
FF |
* |
√ |
√ |
× |
!important |
× |
√ |
√ |
_ |
√ |
× |
× |
于是大家还可以这样来区分IE6,IE7,firefox
: background:orange;*background:green;_background:blue;
注:不管是什么方法,书写的顺序都是firefox的写在前面,IE7的写在中间,IE6的写在最后面。