CSS対応各ブラウザのhack

3312 ワード

CSSは各ブラウザのhackに対応:できるだけ手書きコードを書くことで、学習効率と深さを効果的に向上させることができることを提案します.ブラウザの種類が多くて、面倒も自然に多くて、主に各種のブラウザのいくつかの属性に対するレンダリング効果は異なっているので、時には特定のブラウザあるいは特定のバージョンに対してCSSコードを書く必要があって、このようにいわゆる“CSS Hack”を使う必要があって、以下に1段の実例の形式でブラウザ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/