CSS的Hack大搜集

当前位置 : 首页 > 网页制作 > CSS > CSS的Hack大搜集

CSS的Hack大搜集

来源: 作者: 时间:2016-01-29 09:12
Hack在CSS的编写中是经常被用到的一种技术。之所以出现了Hack,是因为各个浏览器的解析有专属于自己的写法的。这也是CSS的神奇之处之一。不过,Hack虽然是如此的好用,作为前端写代
Hack在CSS的编写中是经常被用到的一种技术。之所以出现了Hack,是因为各个的解析有专属于自己的写法的。这也是CSS的神奇之处之一。不过,Hack虽然是如此的好用,作为前端写代码的我们来说,用它绝对是快准狠的解决了问题,但是不太推荐大家用Hack。
  Hack的技术是针对不同浏览器写不同的样式,让浏览器达到不同的渲染效果。实现每个浏览器不同的渲染效果,可以用条件样式,也可以用Hack。下面就是我收集的一些Hack的各种方法。
  1、Firefox
[css]  
@-moz-document url-prefix() {  
  .div1 {  
     width:30px;  
  }  
}  
 
  支持Firefox的还有几种写法:
[css]  
/* 支持所有firefox版本 */  
#div1[id=div1] { width:30px; }  
 
  或
[css]  
@-moz-document url-prefix() { .div { width:30px; } }   
 
  或
[css]  
/* 支持所有Gecko内核的浏览器 (包括Firefox) */  
*>.div1 { width:30px; }  
 
  2、Webkit枘核浏览器(chrome and safari)
[css]  
@media screen and (-webkit-min-device-pixel-ratio:0)    {  
    div { width:30px; }  
}  
 
  上面写法主要是针对Webkit内核的浏览器,如Google Chrome 和 Safari浏览器:
[css]  
@media screen and (-webkit-min-device-pixel-ratio:0)    {  
    div { width:30px; }  
}  
 
  3、Opera浏览器
  Opera浏览器没有Hack,网上的那些Opera的Hack我试过了,并不起作用。好不容易对Opera起作用了,一般浏览器都起作用了。若大家有Opera的Hack欢迎分享哟。
  4、IE9浏览器
[css]  
:root div {height:300px\9;}  
 
  5、IE9以及IE9以下版本
[css]  
div {height:300px\9;}  
 
  6、IE8浏览器
[css]  
div {height:300px/;}  
 
  或
[css 
@media \0screen{  
    div {height:300px;}  
}  
 
  7、IE8以及IE8以上的版本
[css] 
div {height:300px\0;}  
 
  8、IE7浏览器
[css]  
*+ div{height:300px;background:red;}  
 
  或
[css]  
*:first-child+html div{height:300px;}  
 
  9、IE7及IE7以下版本浏览器
[css] 
div {*height:300px;}  
 
  10、IE6浏览器
[css]  
div {_height/**/:/**/300px;}  
 
  或
[css] 
div {_height: 300px;}  
 
  或
[css] 
*html div {height: 300px;}  
 
  上面的内容是我收集的一些各个版本浏览器下如何识别各种的Hack写法,包括了现代浏览器还有就是很奇葩的浏览器。接下来是选择器和CSS属性选择器在不同浏览器的支持情况
  1、IE6
[css]  
* html div {background:red;}  
 
  2、仅仅IE7浏览器
[css]  
*:first-child+html div {background:red;}  
 
  3、除IE6之外的所有浏览器(IE7-9, Firefox,Safari,Opera)
[css]  
html>body div {background:red;}  
 
  4、IE8-9,Firefox,Safari,Opear
[css]  
html>/**/body div {background:red;}  
 
  5、IE9+
[css] 
:root div {background:red;}  
 
  6、Firefox浏览器
[css]  
@-moz-document url-prefix() {  
      div {background:red;}  
}  
 
  6、Webkit内核浏览器(Safari和Google Chrome)
[css]  
@media screen and (-webkit-min-device-pixel-ratio:0)    {  
    div {background:red;}  
}  
 
  7、Opera浏览器
  Opera浏览器没有Hack,网上的那些Opera的Hack我试过了,并不起作用。好不容易对Opera起作用了,一般浏览器都起作用了。若大家有Opera的Hack欢迎分享哟。
 
  8、iPhone / mobile webkit
[css]  
@media screen and (max-device-width: 480px) {  
    div {background:red;}  
}  
 
  上面为大家介绍的是有关各个浏览器关于CSS的Hack的写法,基中有针对于现代浏览器Safari,Google Chrome和Firefox的写法还有前端们最讨厌的IE家族的Hack写法。下面是一些综合小技巧:
 
  一、方法一:
[css]  
div {  
    height:300px;  
    background: red;/*所有现代浏览器*/  
    background: green\9;/*所有IE浏览器*/  
    background: lime\0;/*IE8-9浏览器 Opera*/  
    *background: red;/*IE6-7浏览器*/  
    +background: blue;/*IE7浏览器*/  
    _background: orange;/*IE6浏览器*/  
}  
@media all and (min-width:0px){  
    background: #000;/*Webkit和Opera浏览器*/  
}  
@media screen and (-webkit-min-device-pixel-ratio:0) {  
    background: #f36;/*Webkit内核浏览器*/  
}  
@-moz-document url-prefix(){   
    div{background:#ccc;}/* all firefox */  
}   
 
  二、方法二:
  1、创建条件样式表,并在HTML中body里添加相应的class类名
           HTML代码:
[html]  
<!--[if IE6]><body class="ie6"><<![endif]-->  
<!--[if IE7]><body class="ie7"><![endif]-->  
<!--[if IE8]><body class="ie8"><![endif]-->  
<!--[if IE9]><body class="ie9"><![endif]-->  
<!--[if !IE]><body class="non-ie"><![endif]-->  
 
          CSS代码:
[css]  
div {height:30px;background: blue;}/*现代浏览器*/  
.non-ie div {background: red;}/*除IE外浏览器*/  
.ie9 div {background: yellow;}/*IE9浏览器*/  
.ie8 div{background: green;}/*IE8浏览器*/  
.ie7 div {background: orange;}/*IE7浏览器*/  
.ie6 div {background: lime;}/*IE6浏览器*/  
@media all and (min-width: 0px){   
    div {background:black;} /* webkit and opera */  
}  
@media screen and (-webkit-min-device-pixel-ratio:0){   
    div{background:#369;}/* webkit */  
}  
@-moz-document url-prefix(){   
    div{background:#963;}/* firefox * /  
}   
 
 
  以上就是我所收集并整理的有关CSS的Hack的一些小技巧,希望能对大家有所帮助,能为大家解燃眉之急。不在万不得已的时候,大家还是不要用Hack哟。
 
Tag:
网友评论

<