Home > Article > Web Front-end > CSS兼容各浏览器的hack_html/css_WEB-ITnose
CSS兼容各浏览器的hack_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:32:201202browse
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/
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：页面中添加代码，并高亮关键字_html/css_WEB-ITnoseNext article：CSS的经典问题二：如何解决所有子元素浮动以后，父元素高度为0的问题？_html/css_WEB-ITnose