Burnman I Am What I Am

CSS Hack

14 Jun 2014

区分 IE6~IE11、FireFox、Chrome、Opera

CSS hack由于不同的浏览器，比如Internet Explorer 6,Internet Explorer 7,Mozilla Firefox等，对CSS的解析认识不一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。 这个时候我们就需要针对不同的浏览器去写不同的CSS，让它能够同时兼容不同的浏览器，能在不同的浏览器中也能得到我们想要的页面效果。

.content .test {
  width: 200px;
  height: 200px;
  background: #f60; /*all*/
  background: #06f\9; /*IE*/
  *background: #666; /*IE6,7*/
  _background: #ccc; /*IE6*/
}

/* webkit and opera */
@media all and (min-width:0){
  .content .test {
    background: #0f0;
  }
}

/* webkit */
@media screen and (-webkit-min-device-pixel-ratio:0) {
  .content .test {
    background: #ff0;
  }
}

/*FireFox*/
@-moz-document url-prefix() {
  .content .test {
    background: #f0f;
  }
}

/*IE9+*/
@media all and (min-width:0) {
  .content .test{
    background: #f00\9;
    }
}

/*IE10+*/
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  .content .test {
    background: #0ff;
  }
}

Demo：http://codepen.io/spaling/pen/lxLkD

参考：

  • http://browserhacks.com/
  • http://chensy0203.github.io/posts/css-hack.html

Related Posts