IE六、IE七、IE八、Firefox兼容性CSS HACK问题

时间  2019-11-07 标签 firefox 兼容性 css hack 问题
通俗地讲：CSS Hack指各版本及各品牌浏览器之间对CSS解释后出现网页内容的兼容bug偏差(好比咱们常说错位)的处理。 因为各浏览器的内核不一样，因此会形成一些偏差就像JS同样，一个JS网页特效，在微软IE六、IE七、IE8浏览器有效果，但可能在火狐（Mozilla Firefox）谷歌浏览器无效，这样就叫作JS Hack ，因此咱们对于CSS来讲他们来解决各浏览器对CSS解释不一样所采起的区别不一样浏览器制做不一样的CSS样式的设置来解决这些问题就叫做CSS Hack。  
 
1.区别IE和非IE浏览器CSS HACK代码
 #divcss5{
background:blue; /*非IE 背景藍色*/
background:red \9; /*IE六、IE七、IE8背景紅色*/
}

2.区别IE6,IE7,IE8,FF CSS HACK 
【区别符号】：「\9」、「*」、「_」
【示例】： css

 #divcss5{
background:blue; /*Firefox 背景变蓝色*/
background:red \9; /*IE8 背景变红色*/
*background:black; /*IE7 背景变黑色*/
_background:orange; /*IE6 背景变橘色*/
}


 【说明】：由于IE系列浏览器可读「\9」，而IE6和IE7可读「*」(米字号)，另外IE6可辨识「_」(底线)，所以能够依照顺序写下来，就会让浏览器正确的读取到本身看得懂得CSS语法，因此就能够有效区分IE各版本和非IE浏览器(像是Firefox、Opera、Google Chrome、Safari等)。 html

 

3.区别IE六、IE七、Firefox (EXP 1) 
【区别符号】：「*」、「_」
【示例】： web

 #divcss5{
background:blue; /*Firefox背景变蓝色*/
*background:black; /*IE7 背景变黑色*/
_background:orange; /*IE6 背景变橘色*/
}


【说明】：IE7和IE6可读「*」(米字号)，IE6又能够读「_」(底线)，可是IE7却没法读取「_」，至于Firefox(非IE浏览器)则彻底没法辨识「*」和「_」，所以就能够透过这样的差别性来区分IE六、IE七、Firefox chrome

 

4.区别IE六、IE七、Firefox (EXP 2) 
【区别符号】：「*」、「!important」
【示例】： windows

 #divcss5{
background:blue; /*Firefox 背景变蓝色*/
*background:green !important; /*IE7 背景变绿色*/
*background:orange; /*IE6 背景变橘色*/
}


【说明】：IE7能够辨识「*」和「!important」，可是IE6只能够辨识「*」，却没法辨识「!important」，至于Firefox能够读取「!important」但不能辨识「*」所以能够透过这样的差别来有效区隔IE六、IE七、Firefox。 浏览器

 

5.区别IE七、Firefox 
【区别符号】：「*」、「!important」
【示例】： 测试

 #divcss5{
background:blue; /*Firefox 背景变蓝色*/
*background:green !important; /*IE7 背景变绿色*/
}


【说明】：由于Firefox能够辨识「!important」但却没法辨识「*」，而IE7则能够同时看懂「*」、「!important」，所以能够两个辨识符号来区隔IE7和Firefox。

 

6.区别IE六、IE7 (EXP 1) 
【区别符号】：「*」、「_」
【示例】： url

 #tip {
*background:black; /*IE7 背景变黑色*/
_background:orange; /*IE6 背景变橘色*/
}


【说明】：IE7和IE6均可以辨识「*」(米字号)，但IE6能够辨识「_」(底线)，IE7却没法辨识，透过IE7没法读取「_」的特性就能轻鬆区隔IE6和IE7之间的差别。 spa

 

7.区别IE六、IE7 (EXP 2) 
【区别符号】：「!important」
【示例】： firefox

 #divcss5{
background:black !important; /*IE7 背景变黑色*/
background:orange; /*IE6 背景变橘色*/
}

【说明】：由于IE7可读取「!important;」但IE6却不行，而CSS的读取步骤是从上到下，所以IE6读取时因没法辨识「!important」而直接跳到下一行读取CSS，因此背景色会呈现橘色。

 

8.区别IE六、Firefox 
【区别符号】：「_」
【示例】：

 #divcss5{
background:black; /*Firefox 背景变黑色*/
_background:orange; /*IE6 背景变橘色*/
}
 

【说明】：由于IE6能够辨识「_」(底线)，可是Firefox却不行，所以能够透过这样的差别来区隔Firefox和IE6，有效达成CSS hack。

 


盒模型解决方法

selct {width:IE5.x宽度; voice-family :"\"} \""; voice-family:inherit; width:正确宽度;}
盒模型的清除方法不是经过!important来处理的。这点要明确。

截字省略号
select { -o-text-overflow:ellipsis; text-overflow:ellipsis; white-space:nowrap; overflow:hidden; }
这个是在越出长度后会自行的截掉多出部分的文字，并以省略号结尾，很好的一个技术。只是目前Firefox并不支持。

IE的if条件Hack

<!--[if IE]> Only IE <![endif]-->
全部的IE可识别
<!--[if IE 5.0]> Only IE 5.0 <![endif]-->
只有IE5.0能够识别
<!--[if gt IE 5.0]> Only IE 5.0+ <![endif]-->
IE5.0包换IE5.5均可以识别
<!--[if lt IE 6]> Only IE 6- <![endif]-->
仅IE6可识别
<!--[if gte IE 6]> Only IE 6/+ <![endif]-->
IE6以及IE6如下的IE5.x均可识别
<!--[if lte IE 7]> Only IE 7/- <![endif]-->
仅IE7可识别
 
以上包括了IE6\IE8\IE7\火狐浏览器兼容问题及解决方法。



总结如下HACK书写方法: 

浏览器：仅限IE6+，FF，Safari，Chrome，Opera；（截止到2011.10.12非IE均为最新版本）。
  测试环境：windows系统;（FF : firefox; OP : opera; SA : safari; CH : chrome;  Y表明支持，N表明不支持。）

标志符 示例 IE6 IE7 IE8 IE9 FF OP SA CH
* .eq {*color:#000;} Y Y N N N N N N
_ .eq {_color:#000;} Y N N N N N N N
+ .eq {+color:#000;} Y Y N N N N N N
- .eq {-color:#000;} Y N N N N N N N
> .eq {>color:#000;} Y Y N N N N N N
\0 .eq {color:#000\0;} N N Y Y N Y N N
\9 .eq {color:#000\9;} Y Y Y Y N N N N
\9\0 .eq {color:#000\0;} N N N\Y Y N N N N
:root .xx{xxx:xxx\9;} :root .eq {color:#a00\9;} N N N Y N N N N
*+ .eq {*+color:#000;} Y Y N N N N N N
*- .eq {*-color:#000;} Y N N N N N N N
*html *html .eq {color:#000;} Y N N N N N N N
*+html *+html .eq {color:#000;} N Y N N N N N N
html* html* .eq {color:#000;} Y Y N N N N N N
[; .eq {color:red;[;color:blue;} Y Y N N N N Y Y
html>body html>body .eq {color:blue;} N Y Y Y Y Y Y Y
html>/**/body html>/**/body .eq {color:blue;} N N Y Y Y Y Y Y
html/**/>body html/**/>body .eq {color:blue;} N Y Y Y Y Y Y Y
@media all and (min-width:0px){} @media all and (min-width:0px){.eq {color:#000;}} N N N Y Y Y Y Y
*:first-child+html *:first-child+html .eq {color:blue;} N Y N N N N N N
*:first-child+html{} *html *:first-child+html{} *html .eq {color:blue;} Y N N N N N N N
@-moz-document url-prefix(){} @-moz-document url-prefix(){ .eq {color:blue;}} N N N N Y N N N
@media screen and (-webkit-min-device-pixel-ratio:0){} @media screen and (-webkit-min-device-pixel-ratio:0){.eq {color:blue;}} N N N N N N Y Y
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0){} @media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0){.eq {color:blue;}} N N N N N Y N N
body:nth-of-type(1) body:nth-of-type(1) .eq {color:blue;} N N N Y Y Y Y Y

 

注意事项：

一、因为各浏览器更新神速，因此有些HACK可能会有变化，因此请你们注意。
二、[;此种方式会影响后续样式，不可取。
三、\9\0并不是对全部属性都能区分IE8和IE9。好比：background-color能够，但background不能够，还有border也不能够。因此在实际用时要测试下。
四、当同时出现\0，*，_，时，推荐将\0写在*和_前面。例如:color:red\0;*color:blue;_color:green;可行，不然IE7和IE6里的效果会失效。但border例外，放在先后均可以。保险起见，仍是放在前面。

书写方法一：

 

IE6 hack
　　_background-color:#CDCDCD; /* ie 6*/
IE7 hack
　　*background-color:#dddd00; /* ie 7*/
IE8 hack
　　background-color:red \0; /* ie 8/9*/
IE9 hack
　　background-color:blue \9\0;
火狐，遨游，及其它高级浏览器通用
　　background-color:red!important;
注意写hack的顺序，其中：
background-color:red\0;IE8和IE9都支持；background-color:blue\9\0; 仅IE9支持；
另外，background-color:#eeeeee\9;的HACK支持IE6-IE8，可是IE8不能识别“*”和“_”的CSS HACK。
可综合上述规律灵活应用。

 

书写方法二：

 

#element {color:orange;}
#element {*color: white; }  /* IE6+7, doesn't work in IE8/9 as IE7 */
#element {_color: red; }  /* IE6 */
#element {color: green\0/IE8+9; }  /* IE8+9  */
:root #element { color:pink \0/IE9; }  /* IE9 */

 

IE9 和 IE8 以及其余版本的区别说明

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的
 遇到的问题：

问题一：
在谷歌下： 
在IE8下：
 
解决方法：给input设置line-height:30px\9（all IE）
line-height:30px\0（IE8+）
陆续更新中。。。。
联系我们 沪ICP备13005482号-10