CSS兼容各浏览器的hack

最新推荐文章于 2025-08-13 21:05:35 发布

转载最新推荐文章于 2025-08-13 21:05:35 发布 · 57 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/qjqcs/p/5022353.html

文章标签：

#javascript #php #ViewUI

本文深入探讨了CSS中的hack技术，旨在解决浏览器兼容性问题，并通过JavaScript实现特定浏览器行为的定制。文章以实例展示了如何使用CSS hack来适配不同浏览器版本，同时介绍了JavaScript如何在特定浏览器环境下进行行为调整。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>