妙味雲教室のcss:互換性のあること

1028 ワード

一.条件付きコメント文
ieのバージョンだと判断します.

<body>
<!--[if IE]>
  IE
<![endif]-->
<!--[if IE 9]>
9
<![endif]-->
<!--[if IE 8]>
8
<![endif]-->
<!--[if IE 7]>
7
<![endif]-->
<!--[if IE 6]>
6
<![endif]-->
</body>

二.css hack
9 IE 10より前のIEブラウザ解析+、*IE 7はIE 7より前のIEブラウザ解析を含むIE 6は、IE 6以前のIEブラウザを含む

.box{ width:100px;height:100px;background:Red;background:blue\9; +background:yellow;_background:green;}
@media screen and (-webkit-min-device-pixel-ratio:0){.box{background:pink}}

三.スタイルの優先順位
!importantスタイルの優先順位を上げる
デフォルトスタイル<タイプIE 6では、importantの後ろに同じスタイルを追加すると、importantの役割が破壊され、デフォルトの優先順位で行きます

<style>
.box{width:100px;height:100px;background:red !important; background:pink;}
</style>

<div class="box" style="background:#000;"></div>

CSS 2仕様読解:ビジュアルフォーマットモデルVisual formatting model

IE 6 DIVではhoverスタイルの解決方法はサポートされていません