码迷,mamicode.com
首页 > Web开发 > 详细

CSS兼容各浏览器的hack

时间:2015-12-05 22:37:19      阅读:177      评论:0      收藏:0      [点我收藏+]

标签:

CSS兼容各浏览器的hack:
建议:尽可能的手写代码,可以有效的提高学习效率和深度。
浏览器的种类多,麻烦自然也多,主要是各种浏览器对某些属性的渲染效果并不相同,所以有时候需要专门针对特定浏览器或者特定版本书写CSS代码,这样就需要用到所谓的“CSS Hack”,下面以一段实例的形式介绍一下个浏览器hack。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style>
.test{
  width: 300px;
  height: 300px;
  background: #fac;   /*各浏览器都认识,主要给高级浏览器用*/
  background: blue\0; /*ie10、9、8*/
  background: red\9; /*所有的 ie*/
  +background: yellow; /*ie7、6 +号同*号 */
  _background:black; /*ie6*/
}
 
:root .test{background: blue\9;} /*ie9*/
.ie10 .test{background: #ffcccc;} /*ie10  (js 专属)*/
</style>
<script type="text/javascript">
  //ie 10
  if (window.matchMedia("screen and (-ms-high-contrast: active), (-ms-high-contrast: none)").matches) {
    document.documentElement.className += "ie10";
}
</script>
</head>
<body>
  <div class="test">蚂蚁部落</div>
</body>
</html>

原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=3370

更多内容:http://www.softwhy.com/shili/

CSS兼容各浏览器的hack

标签:

原文地址:http://www.cnblogs.com/qjqcs/p/5022353.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!