欢迎各位兄弟 发布技术文章

这里的技术是共享的

You are here

首页

css hack 有大用

shiping1 的头像
星期五, 2014-09-26 09:59 — shiping1


http://www.docin.com/p-628605442.html 这一个也有用
史上最全的css hack（ie6-9,firefox,chrome,opera,safari）

      在这个浏览器百花争鸣的时代，作为前端开发的我们为了我们漂亮的设计能适应各个浏览器可为煞费苦心，主要体现在javascript和css上面。javascript我这次就不谈了，先说说css。
      为了适应不同浏览器不同的版本（版本主要就ie来说），ie这朵奇葩现在我们要兼容6-9，它的10也快出来了。。。在ie下我们可以写条件注释来区分ie和其他浏览器，以及ie的版本，这些请大家自行google。这篇文章主要讨论的是css hack。下面废话补多说了，直接上代码
复制代码
<!DOCTYPE html>  
<html>  
<head>  
    <title>Css Hack</title>  
    <style>  
    #test   
    {   
        width:300px;   
        height:300px;   
          
        background-color:blue;      /*firefox*/
        background-color:red\9;      /*all ie*/
        background-color:yellow\0;    /*ie8*/
        +background-color:pink;        /*ie7*/
        _background-color:orange;       /*ie6*/
    }  
    :root #test { background-color:purple\9; }  /*ie9*/
    @media all and (min-width:0px){ #test {background-color:black\0;} }  /*opera*/
    @media screen and (-webkit-min-device-pixel-ratio:0){ #test {background-color:gray;} }  /*chrome and safari*/
    </style>  
</head>  
<body>  
    <div id="test">test</div>  
</body>  
</html> 
复制代码
      上面这段代码大家可以直接copy出来，保存成html在各浏览器试试。下面我来分析下：
    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写法或者本文有不妥之处，欢迎留言，第一次写文章，请轻砸。
标签: css hack
14
0
(请您对文章做出评价)
» 下一篇：ie6，7 location.href 没有权限的出现原因及解决方案
posted @ 2011-08-23 10:11 飘~ 阅读(58236) 评论(8) 编辑 收藏

  
#1楼 2011-08-23 10:54 | kiter  
你能说说@media all and (min-width:0px)和@media screen and (-webkit-min-device-pixel-ratio:0) 这里面的(min-width:0px)和(-webkit-min-device-pixel-ratio:0)的作用啊！~
支持(0)反对(0)
  
#2楼 2011-08-23 11:02 | 牛腩  
学习一下。。看得有些混乱的。。现在做网页啥也不管了，只求IE 6,7,8,9,FF,CHROME能看得过去就好了。
支持(0)反对(0)
  
#3楼 2011-08-23 16:09 | dotNetDR_  
能不能根据UserAgent去动态加载css?这个方案如何?
支持(0)反对(0)
  
#4楼[楼主] 2011-08-23 18:33 | 飘~  
@dotNetDR_
肯定可以但感觉代价有点大
支持(0)反对(0)
  
#5楼 2011-08-24 09:35 | rinsen  
引用飘~：
@dotNetDR_
肯定可以但感觉代价有点大

这个,看情况,第一次肯定略微有些大,但是随后修改的时候就好多了,比写hack强多了.
支持(0)反对(0)
  
#6楼 2012-03-31 15:42 | 脚步骆驼  
非常强大.. “\9” 这个命令的确帮我解决问题呢~
支持(0)反对(0)
  
#7楼 2012-12-19 19:55 | unifyyeteng  
谢谢，解决了我一个兼容。
支持(0)反对(0)
  
#8楼 2013-02-28 16:05 | 潇潇shell  
博主，首先辛苦你整理了
看了你的文章，学习了很多
其中有两点疑问，希望你帮忙解答
（1）通过我的测试，我发现background-color:yellow\0;这个不只是IE8认识，IE9也认识，我本机是win7，IE9
（2）我把以下两句：
@media all and (min-width:0px){ #test{background-color:black\0;} } /**/ /*opera*/
@media screen and (-webkit-min-device-pixel-ratio:0){ #test{background-color:gray;} }
修改为如下：
@media all #test{background-color:black\0;} } /**/ /*opera*/
@media screen #test{background-color:gray;} }
就是删除了and 及后面的内容，浏览器测试还是和有一样?能否告知去掉的部分的作用是什么?以后要用的话，就直接省略写可以吗?
来自 http://www.cnblogs.com/WuQiang/archive/2011/08/23/2150240.html

IE6/IE7/IE8/Firefox/Chrome/Safari的CSS hack兼容一览表

来源：互联网 作者：佚名 时间：03-06 12:31:57 【大 中 小】
知道CSS的朋友一定听说过CSS hack，现在的浏览器IE、Firefox、Chrome、Opera、Safari。。。百家争鸣，可苦了Web前端开发人员了。
 
不同的浏览器对CSS的解释都有一点出入，特别是padding, line-height这些要细微控制的地方，下面的hack基本可以解决这个问题： 
• 在属性前加下划线(_)，那么此属性只会被IE6解释 
• 在属性前加星号(*)，此属性只会被IE7解释 
• 在属性值后面加"\9"，表示此属性只会被IE8解释 

各浏览器CSS hack兼容表：
 IE6IE7IE8FirefoxChromeSafari
!important Y Y  
_Y     
*YY    
*+ Y    
\9YYY   
\0  Y   
nth-of-type(1)    YY

复制代码
代码如下:

#test{ 
color:red; /* 所有浏览器都支持 */ 
color:red !important;/* Firefox、IE7支持 */ 
_color:red; /* IE6支持 */ 
*color:red; /* IE6、IE7支持 */ 
*+color:red; /* IE7支持 */ 
color:red\9; /* IE6、IE7、IE8支持 */ 
color:red\0; /* IE8支持 */ 
} 
body:nth-of-type(1) p{color:red;} /* Chrome、Safari支持 */ 

整体测试代码示例： 

复制代码
代码如下:

.test{ 
color:#000000; 
color:#0000FF\0; 
[color:#00FF00; 
*color:#FFFF00; 
_color:#FF0000; 
} 


复制代码
代码如下:

#menu { line-height: 23px; }/* firefox 浏览器实行这句定义 */ 
#menu { line-height: 26px\9; }/*ie6,ie7,ie8 这句定义主要尖对IE8来hack*/ 
#menu { *line-height: 23px; }/*ie6,ie7 这句定义主要尖对IE7来hack*/ 
#menu { _line-height: 23px; }/*ie6 浏览器优先实行这句定义*/ 
或者写成一句，注意顺序 
#menu { line-height:23px; line-height: 26px\9; *line-height: 23px; _line-height:23px; } 
或者 
* html #menu { line-height: 23px; } /* IE6 浏览器实行这句定义 */ 
*+html #menu { line-height: 23px; }/* IE7 浏览器实行这句定义*/ 

其他说明： 
1、如果你的页面对IE7兼容没有问题，又不想大量修改现有代码，同时又能在IE8中正常使用，微软声称，开发商仅需要在目前兼容IE7的网站上添加一行代码即可解决问题，此代码如下： 
<meta http-equiv="x-ua-compatible" content="ie=7" /> 
2、body:nth-of-type(1) 如果这样写，表示全局查找body，将会对应第一个<body>。 
3、还有其他写法，比如： 
*html #test{}或者 *+html #test{} 
4、*+html 对IE7的hack 必须保证HTML顶部有如下声明： 
http://www.w3.org/TR/html4/loose.dtd 
5、顺序：Firefox、IE8、IE7、IE6依次排列。 
小知识：什么是CSS hack？ 
　　由于不同的浏览器，比如IE6、IE7、IE8、Firefox等，对CSS的解析认识不一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。 
　　这个时候我们就需要针对不同的浏览器去写不同的CSS，让它能够同时兼容不同的浏览器，能在不同的浏览器中也能得到我们想要的页面效果。 
　　这个针对不同的浏览器写不同的CSS code的过程，就叫CSS hack，也叫写CSS hack。
下面是补充：

复制代码
代码如下:

selector{ 
property:value; /* 所有浏览器 */ 
property:value\9; /* 所有IE浏览器 */ 
+property:value; /* IE7 */ 
_property:value; /* IE6 */ 
} 

当然，注意顺序。根据CSS的优先性，上面的写法，分别针对Firefox、IE8、IE7和IE6显示值。让我们看看这个演示： 



   提示：您可以先修改部分代码再运行

演示的CSS代码如下： 

复制代码
代码如下:

p.ie{ 
height:60px;text-align:center;line-height:60px;border:1px dashed #bbb;background:#f7f7f7;font:15; 
color:blue; // 所有浏览器 
color:brown\9; // 所有IE浏览器 
+color:red; // IE7 
_color:green; // IE6 
} 

哈，事实就这么简单。你看到的是那一句话呢？如果你多个浏览器都测试了，就会看到，显示的文字和颜色是不同的。为什么？看看我的HTML中这个段落是这样写的： 

复制代码
代码如下:

<p class="ie"> 
<span style="display:block;display:none\9;">嘿嘿，小子竟然也用Firefox，蓝色文字。</span> 
<!--[if IE 8]>不错不错，挺先进的嘛，使用IE8呢！文字是褐色的。<![endif]--> 
<!--[if IE 7]>你，IE7，红色文字！<![endif]--> 
<!--[if IE 6]>孩子，虽然显示的是绿色文字，不过，IE6可不是好东西呢！<![endif]--> 
</p> 

对，就是IE条件注释+CSS的结果。顺路学一下IE条件注释吧。不用再举例了吧，一看就知道那个对那个了。

来自 http://www.jb51.net/css/24946.html


针对谷歌浏览器Chrome的CSS hack

现在使用谷歌浏览器Google Chrome的用户越来越多，所以在制作网页时也应考虑到Chrome浏览器的兼容性。虽然在原来的CSS hack的原理文章中提到过如何用CSS hack区分Chrome浏览器、Safari浏览器和Opera浏览器，但这次还是要单独再讲一次。
CSS Hack浏览器兼容性对照表[点击放大]
CSS Hack浏览器兼容性对照表 来源：centricle.com
[点击放大]
针对Chrome和Safari等Webkit核心浏览器的CSS hack代码：
@media screen and (-webkit-min-device-pixel-ratio:0) { /* Webkit内核兼容CSS */ }
示例：
 @media screen and (-webkit-min-device-pixel-ratio:0) { .font1 {color:#f00} .border1 {border:1px solid #f00;} .bg3 {background:#f00;} }
除此之外，还有专门针对某个浏览器的CSS hack方法，如针对Webkit核心浏览器和Opera的写法：
/*Webkit and Opera*/ @media all and (min-width:0px){ .font1 {color:red;} }
针对Opera浏览器的写法：
/*Opera*/ @media all and (-webkit-min-device-pixel-ratio:10000),not and all (-webkit-min-device-pixel-ratio:0) { .font1 {color:red;} }
针对Firefox浏览器的写法：
/*Firefox*/ @-moz-document url-prefix() { .font1 {color:red} }
 除了添加CSS hack以外，还应该给每个CSS hack加上注释，这样才能熟记于心，希望大家找到适合自己的方法。

来自 http://www.cnblogs.com/mrcoke/articles/2544760.html

 

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

2013年7月2日 | 分类: Html4+css2 | 357 浏览 | 0 评论

0

 

近期更新了谷歌浏览器，发现先前设置的-webkit-text-size-adjust:none，已经失效了，后才发现谷歌浏览器从V27.0版本就开始不支持了，然后直接导致了页面的错乱，坑爹啊。今天就目前主流浏览器把CSS hack总结了下，希望以后不要纠结类似的问题了，如下：

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

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

标志符示例IE6IE7IE8IE9FFOPSACH
*.eq {*color:#000;}YYNNNNNN
_.eq {_color:#000;}YNNNNNNN
+.eq {+color:#000;}YYNNNNNN
-.eq {-color:#000;}YNNNNNNN
>.eq {>color:#000;}YYNNNNNN
\0.eq {color:#000\0;}NNYYNYNN
\9.eq {color:#000\9;}YYYYNNNN
\9\0.eq {color:#000\0;}NNN\YYNNNN
:root .xx{xxx:xxx\9;}:root .eq {color:#a00\9;}NNNYNNNN
*+.eq {*+color:#000;}YYNNNNNN
*-.eq {*-color:#000;}YNNNNNNN
*html*html .eq {color:#000;}YNNNNNNN
*+html*+html .eq {color:#000;}NYNNNNNN
html*html* .eq {color:#000;}YYNNNNNN
[;.eq {color:red;[;color:blue;}YYNNNNYY
html>bodyhtml>body .eq {color:blue;}NYYYYYYY
html>/**/bodyhtml>/**/body .eq {color:blue;}NNYYYYYY
html/**/>bodyhtml/**/>body .eq {color:blue;}NYYYYYYY
@media all and (min-width:0px){}@media all and (min-width:0px){.eq {color:#000;}}NNNYYYYY
*:first-child+html*:first-child+html .eq {color:blue;}NYNNNNNN
*:first-child+html{} *html*:first-child+html{} *html .eq {color:blue;}YNNNNNNN
@-moz-document url-prefix(){}@-moz-document url-prefix(){ .eq {color:blue;}}NNNNYNNN
@media screen and (-webkit-min-device-pixel-ratio:0){}@media screen and (-webkit-min-device-pixel-ratio:0){.eq {color:blue;}}NNNNNNYY
@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;}}NNNNNYNN
body:nth-of-type(1)body:nth-of-type(1) .eq {color:blue;}NNNYYYYY

注意事项：

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浏览器等是无内核的，用的是计算机中装的系统自带浏览器的内核，所以只需要兼容自带内核浏览器即可兼容。

总结：

总而言之，随着浏览器越来越多，兼容问性题也会随之增加，这也可以充分体现web前端开发者的价值。

来自  http://www.jiangweishan.com/Html4-css2/liulanqi-hack.html
 

IE6/IE7/IE8/Firefox/Chrome/Safari的CSS hack兼容一览表



 

IE6/IE7/IE8/Firefox/Chrome/Safari的CSS hack兼容一览表

来源：互联网 作者：佚名 时间：03-06 12:31:57 【大 中 小】
知道CSS的朋友一定听说过CSS hack，现在的浏览器IE、Firefox、Chrome、Opera、Safari。。。百家争鸣，可苦了Web前端开发人员了。
不同的浏览器对CSS的解释都有一点出入，特别是padding, line-height这些要细微控制的地方，下面的hack基本可以解决这个问题： 
• 在属性前加下划线(_)，那么此属性只会被IE6解释 
• 在属性前加星号(*)，此属性只会被IE7解释 
• 在属性值后面加"\9"，表示此属性只会被IE8解释 

各浏览器CSS hack兼容表：
 IE6IE7IE8FirefoxChromeSafari
!important Y Y  
_Y     
*YY    
*+ Y    
\9YYY   
\0  Y   
nth-of-type(1)    YY

复制代码
代码如下:

#test{ 
color:red; /* 所有浏览器都支持 */ 
color:red !important;/* Firefox、IE7支持 */ 
_color:red; /* IE6支持 */ 
*color:red; /* IE6、IE7支持 */ 
*+color:red; /* IE7支持 */ 
color:red\9; /* IE6、IE7、IE8支持 */ 
color:red\0; /* IE8支持 */ 
} 
body:nth-of-type(1) p{color:red;} /* Chrome、Safari支持 */ 

整体测试代码示例： 

复制代码
代码如下:

.test{ 
color:#000000; 
color:#0000FF\0; 
[color:#00FF00; 
*color:#FFFF00; 
_color:#FF0000; 
} 


复制代码
代码如下:

#menu { line-height: 23px; }/* firefox 浏览器实行这句定义 */ 
#menu { line-height: 26px\9; }/*ie6,ie7,ie8 这句定义主要尖对IE8来hack*/ 
#menu { *line-height: 23px; }/*ie6,ie7 这句定义主要尖对IE7来hack*/ 
#menu { _line-height: 23px; }/*ie6 浏览器优先实行这句定义*/ 
或者写成一句，注意顺序 
#menu { line-height:23px; line-height: 26px\9; *line-height: 23px; _line-height:23px; } 
或者 
* html #menu { line-height: 23px; } /* IE6 浏览器实行这句定义 */ 
*+html #menu { line-height: 23px; }/* IE7 浏览器实行这句定义*/ 

其他说明： 
1、如果你的页面对IE7兼容没有问题，又不想大量修改现有代码，同时又能在IE8中正常使用，微软声称，开发商仅需要在目前兼容IE7的网站上添加一行代码即可解决问题，此代码如下： 
<meta http-equiv="x-ua-compatible" content="ie=7" /> 
2、body:nth-of-type(1) 如果这样写，表示全局查找body，将会对应第一个<body>。 
3、还有其他写法，比如： 
*html #test{}或者 *+html #test{} 
4、*+html 对IE7的hack 必须保证HTML顶部有如下声明： 
http://www.w3.org/TR/html4/loose.dtd 
5、顺序：Firefox、IE8、IE7、IE6依次排列。 
小知识：什么是CSS hack？ 
　　由于不同的浏览器，比如IE6、IE7、IE8、Firefox等，对CSS的解析认识不一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。 
　　这个时候我们就需要针对不同的浏览器去写不同的CSS，让它能够同时兼容不同的浏览器，能在不同的浏览器中也能得到我们想要的页面效果。 
　　这个针对不同的浏览器写不同的CSS code的过程，就叫CSS hack，也叫写CSS hack。
下面是补充：

复制代码
代码如下:

selector{ 
property:value; /* 所有浏览器 */ 
property:value\9; /* 所有IE浏览器 */ 
+property:value; /* IE7 */ 
_property:value; /* IE6 */ 
} 

当然，注意顺序。根据CSS的优先性，上面的写法，分别针对Firefox、IE8、IE7和IE6显示值。让我们看看这个演示： 



   提示：您可以先修改部分代码再运行

演示的CSS代码如下： 

复制代码
代码如下:

p.ie{ 
height:60px;text-align:center;line-height:60px;border:1px dashed #bbb;background:#f7f7f7;font:15; 
color:blue; // 所有浏览器 
color:brown\9; // 所有IE浏览器 
+color:red; // IE7 
_color:green; // IE6 
} 

哈，事实就这么简单。你看到的是那一句话呢？如果你多个浏览器都测试了，就会看到，显示的文字和颜色是不同的。为什么？看看我的HTML中这个段落是这样写的： 

复制代码
代码如下:

<p class="ie"> 
<span style="display:block;display:none\9;">嘿嘿，小子竟然也用Firefox，蓝色文字。</span> 
<!--[if IE 8]>不错不错，挺先进的嘛，使用IE8呢！文字是褐色的。<![endif]--> 
<!--[if IE 7]>你，IE7，红色文字！<![endif]--> 
<!--[if IE 6]>孩子，虽然显示的是绿色文字，不过，IE6可不是好东西呢！<![endif]--> 
</p> 

对，就是IE条件注释+CSS的结果。顺路学一下IE条件注释吧。不用再举例了吧，一看就知道那个对那个了。
 
普通分类: 
div+css
Powered by Drupal

友情链接

校园好文网

 www.shipingzhong.cn  个人技术网_前端_后台    备案号:苏ICP备18010659号-2