（CSS Differences in Internet Explorer 6, 7 and 8）
日々、Web制作者の頭を悩ませている。Webの異端児IE。
本日は、IEのバージョンごとのCSS対応度の違いをまとめたエントリー『CSS Differences in Internet Explorer 6, 7 and 8』をいくつか紹介します。
詳しくは以下から、
セレクタと継承
子供セレクタ
例
a:hover span {
color: #0f0;
}
解説
子供セレクタは、特定の要素（例：body）を直接親とする任意の要素（例：p）にマッチします。
例では、bodyが親でpが子供です。
サポート
バグ
IE7では親アイテムと子の間にHTMLコメントが含まれていると動作しません
対処法
以下の方法を使用する事によって、IE6でも擬似的に子供セレクタが使えます。
複数のクラス
例
.class1.class2.class3 {
background: #fff;
}
解説
このように同じHTML要素で複数のクラスを宣言するときに使用します。
<div class="class1 class2 class3">
<p>Content here.</p>
</div>
サポート
バグ
IE6では、並べられた最後のクラスしか認識しません。
属性セレクタ
例
a[href] {
color: #0f0;
}
解説
このセレクタは、[]で指定された属性がある要素のみマッチします。例では、href属性を持つすべてのアンカータグにマッチしますが、href属性を持たないアンカータグにはマッチしません。
サポート
隣接セレクタ
例
h1+p {
color: #f00;
}
解説
このセレクタは指定された要素に隣接している兄弟にマッチします。 例：
<h1>heading</h1>
<p>Content here.</p>
<p>Content here.</p>
2つのpはh1タグの兄弟です。1つ目のpは、h1タグに隣接してるのでマッチしますが、2つ目のpは、隣接していないのでマッチしません。
参考：隣接兄弟セレクタ - セレクタ - CSS2リファレンス
サポート
バグ
IE7では兄弟の間にHTMLコメントが含まれていると動作しません
間接セレクタ
例
h1~p {
color: #f00;
}
解説
このセレクタは指定された要素の後にあるすべての兄弟にマッチします。
前項で出されたHTMLにこのセレクタを適用すると、両方のpタグにマッチします。もし、pタグが見出しの前にあるなら、マッチしません。
サポート
疑似クラスと疑似要素
:hover疑似クラスの子孫セレクタ
Example
a:hover span {
color: #0f0;
}
解説
サポート
複数の疑似クラス
例
a:first-child:hover {
color: #0f0;
}
解説
サポート
a要素以外に:hover擬似クラス
例
div:hover {
color: #f00;
}
解説
アンカータグ以外の要素にも:hover疑似クラスを適用する事が出来ます。
サポート
対処法
:first-child疑似クラス
例
div li:first-child {
background: blue;
}
解説
この疑似クラスは要素内で最初にある子の要素を指定することが出来ます。
サポート
バグ
IE7では指定された要素の前にHTMLコメントがあると動作しません。
:focus疑似クラス
例
a:focus {
border: solid 1px red;
}
解説
この疑似クラスはキーボードフォーカスがある要素を指定する事が出来ます。
サポート
:beforeと:after疑似要素
例
#box:before {
content: "This text is before the box";
}
#box:after {
content: "This text is after the box";
}
解説
この疑似クラスは指定された要素の前後に内容を加える事が出来ます。
サポート
プロパティサポート
positionを使って仮想的に指定したサイズ
例
#box {
position: absolute;
top: 0;
right: 100px;
left: 0;
bottom: 200px;
background: blue;
}
解説
絶対位置でtop,left,bottom,rightを指定する事によって、幅と高さをしてしなくても「仮想」の大きさ(幅と高さ)を与えられます
サポート
対処法
参考：IEで絶対配置（position:absolute）のボックスが消えるバグの検証
Min-HeightとMin-Width
例
#box {
min-height: 500px;
min-width: 300px;
}
解説
幅（または高さ）に最小の値を指定することが出来ます。これによって、幅（または高さ）が指定した値より小さくならなくなります。
サポート
対処法
これに関しては様々な方法があるようです。参考：IE6のmin-width、min-heightハックに関して
参考：[CSS]IEで、min-widthやmax-widthを実現する方法
参考：min-width、min-height、max-width、max-heightをIE6でも実装する方法
Max-HeightとMax-Width
例
#box {
max-height: 500px;
max-width: 300px;
}
解説
前項で書いたMin-HeightとMin-Widthの逆です。幅（または高さ）に最大の値を指定することが出来ます。
サポート
対処法
参考：[CSS]IEで、min-widthやmax-widthを実現する方法
参考：min-width、min-height、max-width、max-heightをIE6でも実装する方法
透明なborder
例
#box {
border: solid 1px transparent;
}
解説
透明なボーダーを使う事によって、スペースを取る事が出来ます。
サポート
position:fixed要素
例
#box {
position: fixed;
}
解説
このpositionプロパティを指定する事で、スクロールしても位置が固定されたままの要素を作る事が出来ます。
サポート
対処法
javascriptを使う事によってIE6でも使用する事が出来ます。
参考：IEでposition:fixedを再現するFixed positioning
分かりづらいですがCSSのみでも出来るようです。
参考：CSSのみでIE6にposition:fixedを対応させる
固定位置の背景
例
#box {
background-image: url(images/bg.jpg);
background-position: 0 0;
background-attachment: fixed;
}
解説
background-attachmenプロパティをfixedに指定する事で、背景画像の位置を固定する事が出来ます
サポート
バグ
IE6は、背景が指定された要素を含んでいる親の背景画像を謝って固定します。したがって、ルート要素で使用されたときだけ、この値がIE6で有効に働きます
対処法
参考：IE6でbackground:fixedを実現する：CSS
“inherit”プロパティ
例
#box {
display: inherit;
}
解説
inheritを指定すると親要素のスタイルを子要素へ継承させることができます。
サポート
バグ
IE6とIE7では、inheritをサポートしません。ただし、directionとvisibilityでのみinheritを使う事が出来ます。
tableのborder-spacingプロパティ
例
table td {
border-spacing: 3px;
}
解説
このプロパティを使用する事によって、隣接しているセルのボーダーの間隔を指定する事が出来ます。
参考：border-spacing･････セルのボーダーの間隔を指定する
サポート
tableのempty-cellsプロパティ
例
table {
empty-cells: show;
}
解説
このプロパティを使用する事によって、空白セルのボーダーを表示するかしないか指定できます。
参考：empty-cells･････空白セルのボーダーの表示・非表示を指定する
サポート
テーブルキャプションの垂直位置
例
table {
caption-side: bottom;
}
解説
このプロパティを使用する事によって、テーブルキャプションの位置を下にする事が出来ます。（デフォルトは上です）
参考：caption-side･････テーブル（表）のキャプションの位置を指定する
サポート
（ボックスの）切り抜き表示
例
#box {
clip: rect(20px, 300px, 200px, 100px)
}
解説
このプロパティを使用する事によって、ボックスを切り抜き表示する（指定された領域以外を隠す）事が出来ます。
参考：clip･････ボックスを切り抜き表示（クリッピング）する
サポート
バグ
推奨しないコンマなしの構文が使用している場合(すなわち、コンマの代わりにスペースを使用)、不思議な事に、IE6とIE7で有効に働きます。
その他のテクニック
@importで指定したメディアタイプ
例
@import url("styles.css") screen;
解説
上記の例のように、メディアタイプは@importの後に宣言します。この例では、メディアタイプは、「screen」です。
サポート
Bugs
IE6とIE7は@importをサポートしていますが、メディアタイプが指定されているとすべての@importが無視されます。
カウンタの増加
例
h2 {
counter-increment: headers;
}
h2:before {
content: counter(headers) ". ";
}
解説
サポート
引用文字の指定
例
q {
quotes: "'" "'";
}
q:before {
content: open-quote;
}
q:after {
content: close-quote;
}
解説
qタグのcontentプロパティに挿入する引用文字を指定します。
サポート
元記事は以下から、≫CSS Differences in Internet Explorer 6, 7 and 8
';}else{crwn='top'.bold();}
function dsptgs(tp,srchtg){
opTgs=''; tc = 0; itc = 0;
for (i in cTgs["name"]){
opTgs+=mnTgs(i,srchtg,tp);
}
opTgs=opTgs.substring(0,(opTgs.length-(intg+'').length))+'
