css hack合集

最新推荐文章于 2023-09-19 19:34:14 发布

大头菜小白菜

最新推荐文章于 2023-09-19 19:34:14 发布

阅读量447

点赞数

在前端开发中最烦人的问题莫过于浏览器兼容性问题了，下面是我工作依赖积累的CSS hack笔记，都是再线上使用过的哦，都是经过考验的！

Webkit内核CSS hack（Chrome、Safari、Opera）。
注：很奇怪，在Windows10中的Edge（版本是13）下，竟然也起作用，莫非微软要向Webkit看齐？

@media screen and (-webkit-min-device-pixel-ratio:0) { 
.demo {
 /* 这里写只在Webkit内核的浏览器下起作用的样式 */ } 
}

Firefox CSS hack
   @-moz-document url-prefix(){
    .demo { 
       /*  
        这里写写只在firefox中起作用的样式
       */
    } 
}

IE8/9/10/11 CSS hack @media screen\0 {
 .demo{ 
/* 这里写在IE 8 9 10 11下起作用的样式 */ 
  } 
}

IE6/7/8 CSS hack @media \0screen\,screen\9 {
 .demo{
 /* 这里写在IE 6 7 8 下起作用的样式 */
 } 
}

IE9/10 CSS hack

注：IE9/10能识别CSS属性值后面的\9\0,所以想要在IE9/10下表现出来的样式，可以在后面加\9\0即可
此hack有一个问题，即设置的所有属性在IE7下都不起作用，可以使用 IE6/7 的hack来修复一下

display: none\9\0;

IE6/7 CSS hack

注：IE6/7能识别CSS属性前面的 ,所以想要在IE6/7下表现出来的样式，可以在前面面加即可

*display:none;

IE8 CSS hack

@media \0screen\,screen\9 { 
.demo{
 /* 这里写在IE8 下起作用的样式 */
 } <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>测试CSS HACK</title> <style type="text/css"> /* webkit css hack */ .webkit-hack{ color:green; } @media screen and (-webkit-min-device-pixel-ratio:0) { .webkit-hack { color:red; } } /* firefox css hack */ .firefox-hack{ color:green; } @-moz-document url-prefix(){ .firefox-hack{ color:red; } } /* IE8/9/10/11 css hack */ .IE-hack{ color:green; } @media screen\0 { .IE-hack{ color:red; } } /* IE6/7/8 css hack */ .IE678-hack{ color:green; } @media \0screen\,screen\9 { .IE678-hack{ color:red; } } /* 


}







IE7 CSS hack

注：IE7的单独的CSS hack 必须结合着IE6的hack使用

*color:red;
 _color:green;





IE6 CSS hack

_color:green;






结束语：在工作中有时候我需要单独使用IE9 hack，但是我并没有发现有IE9的hack，如果有那位同学知道的话麻烦告知我

我写了一个例子，大家可以拷贝到自己本地，使用各种浏览器测试一下：
<!DOCTYPE html>

 <html lang="zh-CN">

 <head>

 <meta charset="UTF-8">

 <title>测试CSS
 HACK</title>

 <style type="text/css">

 /* webkit css hack */

 .webkit-hack{ color:green; }

 @media screen and (-webkit-min-device-pixel-ratio:0) { .webkit-hack { color:red; } } 





/* firefox css hack */

 .firefox-hack{ color:green; }

 @-moz-document url-prefix(){ .firefox-hack{ color:red; } } 





/* IE8/9/10/11 css hack */ 

.IE-hack{ color:green; } 

@media screen\0 { .IE-hack{ color:red; } } 





/* IE6/7/8 css hack */ 

.IE678-hack{ color:green; } 

@media \0screen\,screen\9 { .IE678-hack{ color:red; } }



IE9/10 css hack

他有一个问题：

无法在IE7及以下起作用即在IE7及以下2个color都不起作用，文本显示为黑色

所以可以用IE6/7的hack修复一下

*/
 .IE910-hack{ 
  color:green;
  color:red\9\0;
  *color:green; 
/* 修复一下，让IE6/7还是显示绿色 */ 
} 

/* IE67 css hack */ 
.IE67-hack{ 
color:green; 
*color:red; 
} 

/* IE8 hack */ 
.IE8-hack{ 
color:green; 
}
 @media \0screen\,screen\9 { 
  .IE8-hack{
    color:red;
    *color:green; 
  } 
}
 /* 





IE7 css hack

听说在傲游浏览器下也起作用？

那位同学试一下，并且把起作用的傲游浏览器版本区间告诉我



*/ 
.IE7-hack{
 color:green;
 *color:red;
 _color:green;
 }

 /* IE6 css hack */ 
.IE6-hack{ 
color:green;
 _color:red; 
}
</style> 
</head>
 <body>
 <p class="webkit-hack">我在webkit内核浏览器下显示为红色，在其他非webkit内核浏览器下显示为绿色</p>
 <p class="firefox-hack">我在firefox浏览器下显示为红色，在其他浏览器下显示为绿色</p>
 <p class="IE-hack">我在IE8/9/10/11浏览器下显示为红色，在其他浏览器下显示为绿色</p>
 <p class="IE678-hack">我在IE6/7/8浏览器下显示为红色，在其他浏览器下显示为绿色</p>
 <p class="IE910-hack">我在IE9/10浏览器下显示为红色，在其他浏览器下显示为绿色</p>
 <p class="IE67-hack">我在IE6/7浏览器下显示为红色，在其他浏览器下显示为绿色</p>
 <p class="IE8-hack">我在IE8浏览器下显示为红色，在其他浏览器下显示为绿色</p>
 <p class="IE7-hack">我在IE7浏览器下显示为红色，在其他浏览器下显示为绿色</p>
 <p class="IE6-hack">我在IE6浏览器下显示为红色，在其他浏览器下显示为绿色</p>
 </body>
 </html>