fc2ブログ

ekakou(絵描校)はフリーフォントやPhotoshopチュートリアルなどを紹介するブログです。

もうIEで泣きたくない!IE6,7,8 でのCSS対応度の違いをまとめてみた

日時2009.10.16
  • このエントリーをはてなブックマークに登録する
  • はてなブックマーク - もうIEで泣きたくない!IE6,7,8 でのCSS対応度の違いをまとめてみた
  • この記事をdel.icio.usに登録する
  • この記事をGoogle Bookmarksに登録する
もうIEで泣きたくない!IE6,7,8 でのCSS対応度の違いをまとめてみた
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が子供です。

参考:子供セレクタ - セレクタ - CSS2リファレンス

サポート
IE6
非対応
IE7
対応
IE8
対応
バグ

IE7では親アイテムと子の間にHTMLコメントが含まれていると動作しません

対処法

以下の方法を使用する事によって、IE6でも擬似的に子供セレクタが使えます。

参考:IE でも擬似的に子供セレクタ

複数のクラス


.class1.class2.class3 {
  background: #fff;
}

解説

このように同じHTML要素で複数のクラスを宣言するときに使用します。

<div class="class1 class2 class3">

<p>Content here.</p>
</div>
サポート
IE6
非対応
IE7
対応
IE8
対応
バグ

IE6では、並べられた最後のクラスしか認識しません。

参考:IE6以下でclassの複数指定でバグがあった

属性セレクタ

a[href] {
  color: #0f0;
}

解説

このセレクタは、[]で指定された属性がある要素のみマッチします。例では、href属性を持つすべてのアンカータグにマッチしますが、href属性を持たないアンカータグにはマッチしません。

参考:属性セレクタ - セレクタ - CSS2リファレンス

サポート
IE6
非対応
IE7
対応
IE8
対応

隣接セレクタ

h1+p {
  color: #f00;
}

解説

このセレクタは指定された要素に隣接している兄弟にマッチします。 例:


<h1>heading</h1>
<p>Content here.</p>
<p>Content here.</p>

2つのpはh1タグの兄弟です。1つ目のpは、h1タグに隣接してるのでマッチしますが、2つ目のpは、隣接していないのでマッチしません。

参考:隣接兄弟セレクタ - セレクタ - CSS2リファレンス

サポート
IE6
非対応
IE7
対応
IE8
対応
バグ

IE7では兄弟の間にHTMLコメントが含まれていると動作しません

間接セレクタ

h1~p {
  color: #f00;
}
解説

このセレクタは指定された要素の後にあるすべての兄弟にマッチします。

前項で出されたHTMLにこのセレクタを適用すると、両方のpタグにマッチします。もし、pタグが見出しの前にあるなら、マッチしません。

サポート
IE6
非対応
IE7
対応
IE8
対応

疑似クラスと疑似要素

:hover疑似クラスの子孫セレクタ

Example
a:hover span {
	color: #0f0;
}

解説

サポート
IE6
非対応
IE7
対応
IE8
対応

複数の疑似クラス

a:first-child:hover {
	color: #0f0;
}

解説

サポート
IE6
非対応
IE7
対応
IE8
対応

a要素以外に:hover擬似クラス

div:hover {
	color: #f00;
}

解説

アンカータグ以外の要素にも:hover疑似クラスを適用する事が出来ます。

サポート
IE6
非対応
IE7
対応
IE8
対応
対処法

参考:IEでa要素以外に:hover擬似クラスを適用させる

:first-child疑似クラス

div li:first-child {
	background: blue;
}

解説

この疑似クラスは要素内で最初にある子の要素を指定することが出来ます。

参考:first-child疑似クラスと隣接セレクタ

サポート
IE6
非対応
IE7
対応
IE8
対応
バグ

IE7では指定された要素の前にHTMLコメントがあると動作しません。

:focus疑似クラス

a:focus {
	border: solid 1px red;
}

解説

この疑似クラスはキーボードフォーカスがある要素を指定する事が出来ます。

サポート
IE6
非対応
IE7
非対応
IE8
対応

:beforeと:after疑似要素

#box:before {
	content: "This text is before the box";
}

#box:after {
	content: "This text is after the box";
}

解説

この疑似クラスは指定された要素の前後に内容を加える事が出来ます。

サポート
IE6
非対応
IE7
非対応
IE8
対応

プロパティサポート

positionを使って仮想的に指定したサイズ

#box {
	position: absolute;
	top: 0;
	right: 100px;
	left: 0;
	bottom: 200px;
	background: blue;
}

解説

絶対位置でtop,left,bottom,rightを指定する事によって、幅と高さをしてしなくても「仮想」の大きさ(幅と高さ)を与えられます

サポート
IE6
非対応
IE7
対応
IE8
対応
対処法

参考:IEで絶対配置(position:absolute)のボックスが消えるバグの検証

Min-HeightとMin-Width

#box {
	min-height: 500px;
	min-width: 300px;
}

解説

幅(または高さ)に最小の値を指定することが出来ます。これによって、幅(または高さ)が指定した値より小さくならなくなります。

サポート
IE6
非対応
IE7
対応
IE8
対応
対処法
これに関しては様々な方法があるようです。

参考:IE6のmin-width、min-heightハックに関して

参考:IE6でmin-widthを実装する方法のまとめ

参考:IE で min-width を指定する方法

参考:[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の逆です。幅(または高さ)に最大の値を指定することが出来ます。

サポート
IE6
非対応
IE7
対応
IE8
対応
対処法

参考:[CSS]IEで、min-widthやmax-widthを実現する方法

参考:min-width、min-height、max-width、max-heightをIE6でも実装する方法

透明なborder

#box {
	border: solid 1px transparent;
}

解説

透明なボーダーを使う事によって、スペースを取る事が出来ます。

サポート
IE6
非対応
IE7
対応
IE8
対応

position:fixed要素

#box {
	position: fixed;
}

解説

このpositionプロパティを指定する事で、スクロールしても位置が固定されたままの要素を作る事が出来ます。

サポート
IE6
非対応
IE7
対応
IE8
対応
対処法

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
非対応
IE7
対応
IE8
対応
バグ

IE6は、背景が指定された要素を含んでいる親の背景画像を謝って固定します。したがって、ルート要素で使用されたときだけ、この値がIE6で有効に働きます

対処法

参考:IE6でbackground:fixedを実現する:CSS

“inherit”プロパティ

#box {
	display: inherit;
}

解説

inheritを指定すると親要素のスタイルを子要素へ継承させることができます。

サポート
IE6
非対応
IE7
非対応
IE8
対応
バグ

IE6とIE7では、inheritをサポートしません。ただし、directionとvisibilityでのみinheritを使う事が出来ます。

tableのborder-spacingプロパティ

table td {
	border-spacing: 3px;
}

解説

このプロパティを使用する事によって、隣接しているセルのボーダーの間隔を指定する事が出来ます。

参考:border-spacing・・・・・セルのボーダーの間隔を指定する

サポート
IE6
非対応
IE7
非対応
IE8
対応

tableのempty-cellsプロパティ

table {
	empty-cells: show;
}

解説

このプロパティを使用する事によって、空白セルのボーダーを表示するかしないか指定できます。

参考:empty-cells・・・・・空白セルのボーダーの表示・非表示を指定する

サポート
IE6
非対応
IE7
非対応
IE8
対応

テーブルキャプションの垂直位置

table {
	caption-side: bottom;
}

解説

このプロパティを使用する事によって、テーブルキャプションの位置を下にする事が出来ます。(デフォルトは上です)

参考:caption-side・・・・・テーブル(表)のキャプションの位置を指定する

サポート
IE6
非対応
IE7
非対応
IE8
対応

(ボックスの)切り抜き表示

#box {
    clip: rect(20px, 300px, 200px, 100px)
}

解説

このプロパティを使用する事によって、ボックスを切り抜き表示する(指定された領域以外を隠す)事が出来ます。

参考:clip・・・・・ボックスを切り抜き表示(クリッピング)する

サポート
IE6
非対応
IE7
非対応
IE8
対応
バグ

推奨しないコンマなしの構文が使用している場合(すなわち、コンマの代わりにスペースを使用)、不思議な事に、IE6とIE7で有効に働きます。

その他のテクニック

@importで指定したメディアタイプ

@import url("styles.css") screen;
解説

上記の例のように、メディアタイプは@importの後に宣言します。この例では、メディアタイプは、「screen」です。

サポート
IE6
非対応
IE7
非対応
IE8
対応
Bugs

IE6とIE7は@importをサポートしていますが、メディアタイプが指定されているとすべての@importが無視されます。

カウンタの増加

h2 {
	counter-increment: headers;
}

h2:before {
	content: counter(headers) ". ";
}

解説

参考:counter-incrementプロパティ。

サポート
IE6
非対応
IE7
非対応
IE8
対応

引用文字の指定

q {
	quotes: "'" "'";
}

q:before {
	content: open-quote;
}

q:after {
	content: close-quote;
}

解説

qタグのcontentプロパティに挿入する引用文字を指定します。

参考:quotes・・・・・引用符を設定する

サポート
IE6
非対応
IE7
非対応
IE8
対応
元記事は以下から、
CSS Differences in Internet Explorer 6, 7 and 8

コメント(0)

新しいコメントを投稿する

名前:

件名:

E-mail:

URI:

パスワード: 管理者にだけ表示を許可する

(コメントは承認制です。実際に表示されるまで時間がかかります。)