CSS兼容各浏览器的hack

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/

上一篇:Unity 碰撞器


下一篇:自定义input[type="radio"]