当前位置: 首页 >> HTML+CSS >> 各种浏览器的Hack写法(chrome firefox ie等)

各种浏览器的Hack写法(chrome firefox ie等)

发表时间:2014-09-08 21:44  |  0条评论  |  点击数:2943  |  作者:jws132

众所周知,Hack是针对不同的浏览器去写不同的CSS样式,从而让各浏览器能达到一致的渲染效果,那么针对不同的浏览器写不同的CSS CODE的过程,就叫CSS HACK,同时也叫写CSS Hack。然后将Hack放在浏览器特定的CSS文件中,让其符合条件的浏览器解析这些代码,就如前面所说的条件样式,我们将CSS Hack代码放入条件样式文件中,符合条件的浏览器就解析,不符合的将不解析,从面达到您所需要的页面渲染效果。总的一句话来说使用CSS Hack将会使用你的CSS代码部分失去作用,然后借助条件样式,使用其原CSS代码在一些浏览器解析,而CSS Hack代码在符合条件要求的浏览器中替代原CSS那部分代码。常见的就是在IE6下使用,不具体说,我想大家都有碰到过了。下面我们就一起来看看所有浏览器都具有什么Hack,换句话说,各种浏览器都能识别哪些CSS的写法。

下面是我收集有关于各浏览器下的Hack:

标志符 示例 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

注意事项:

1、由于各浏览器更新神速,所以有些HACK可能会有变化,所以请大家注意。
2、[;此种方式会影响后续样式,不可取。
3、\9\0并非对所有属性都能区分IE8和IE9。比如:background-color可以,但background不可以,还有border也不可以。所以在实际用时要测试下。
4、当同时出现\0,*,_,时,推荐将\0写在*和_前面。例如:color:red\0;*color:blue;_color:green;可行,否则IE7和IE6里的效果会失效。但border例外,放在前后都可以。保险起见,还是放在前面。

方法一:

  1. IE6 hack:

  2.     _background-color:#CDCDCD; /* ie 6*/

  3. IE7 hack:

  4.     *background-color:#dddd00; /* ie 7*/

  5. IE8 hack:

  6.     background-color:red \0; /* ie 8/9*/

  7. IE9 hack:

  8.     background-color:blue \9\0;

  9. 火狐,遨游,及其它高级浏览器通用:

  10.     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。

方法二:

  1. #text{color:orange;}

  2. #text{*color: white; }  /* IE6+7, doesn't work in IE8/9 as IE7 */

  3. #text{_color: red; }  /* IE6 */

  4. #text{color: green\0; }  /* IE8+9  */

  5. :root #text{color:pink\0; }  /* 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的。

需要我们注意的浏览器:自带内核的有IE6、IE7、IE8、IE9谷歌浏览器(Chrome)、火狐(Mozilla   Firefox)苹果浏览器(Safari)即可,至于我们常用的360安全浏览器、搜狗高速浏览器、天天浏览器、腾讯TT、傲游浏览器、百度浏览器、腾  讯QQ浏览器等是无内核的,用的是计算机中装的系统自带浏览器的内核,所以只需要兼容自带内核浏览器即可兼容。

网友评论 0条评论
  
  • 全部评论
  • 站主信息
网名:小白 | ゞ_Shuつ
姓名:蒋文书
生日:1990-05-22
籍贯:浙江省—温州市
现居:北京市—昌平区
职业:网站设计、网站制作。今后想成为一名高级程序员
爱好:研究java,php编程,打球,唱歌,登山。
喜欢的书:《红与黑》《红楼梦》
喜欢的歌手:黄家驹 Rain 六哲
网站信息:本站正在完善中下步会新增用户中心预计完成在7月中旬
  • 热门关注
  • 资深旅游达人,走南闯北,半年写完超长游记...

  • 资深旅游达人,走南闯北,半年写完超长游记...

  • 资深旅游达人,走南闯北,半年写完超长游记...

  • 最新评论
    暂无数据
  • 【聚会】22日跟大闽网友一起看世界杯,小龙虾啤酒通通免费吃...[详细]

  • 【福利】带孩子玩水不要钱!50份白水洋套票免费送了...[详细]

  • 【福利】熬夜看球太累太伤?没关系!养生粤菜免费吃起来...[详细]

  • 【独家】送福利来了,空调挂机免费清洗,快来回帖报名吧...[详细]

  • 【独家】猜世界杯冠军,8套1088元纯金纪念钞免费送! ...[详细]

Copyright © 2013-2016 . 蒋文书个人博客 版权所有 浙ICP备16006289号