XHTML/CSS・トップ | XHTML・目次

●ウィンドウズ版IE7.0でスタイルシートはどう変わるか?

 2006年10月18日(米国時間)にWindows版 Internet Explorer 7 (以下、IE7.0とします。)英語版が正式にリリースされ、2006年11月2日には日本語版が正式にリリースされました。それによって、CSSのスタイルシートの書き方はどのように変わるのでしょうか。また、どの点に注意をしなければならないのでしょう。答えは今まで通りです。つまり、Internet Explorer 6.0(以下、IE6.0とします。)を考慮したCSSデザインのレイアウトを(当面は)心がけるべきです。 IE 7.0はCSSを正しくサポートするようになったとはいえ、新しいCSSのプロパティ、および特殊なプロパティに対応したわけではありません。CSSに正確に対応すればするほどFirefoxやそのほかのメジャーブラウザと大した変わりはありません。(IE独自の機能、フィルターはありますが)例えば、Safari はメジャーブラウザの中ではCSS version 2.1の厳格な仕様に対応しているブラウザです。CSSのスタイルシートの書き方はバグの多いブラウザを考慮するべきで IE7.0に対応することを優先していてはお話になりません。IE7.0は急ピッチで普及するとは思いますが、まだまだ IE6.0の利用環境はユーザーの手元に残るでしょう。ここでは marginプロパティの値に autoを指定した場合のセンタリングされるか否か、標準モード(標準準拠モード)、互換モード(過去互換モード)について解説します。別項の「IE6.0、7.0におけるDOCTYPE 宣言・XML 宣言と互換モード・標準モードとの関係」にDTD(文書型定義)ごとにIE6.0とIE7.0の表示モードの違いを記載していますので併せてご参照ください。そのほかのブラウザの表示モードについては、「文書型定義(DTD)について」をご参照ください。

  IE7.0がIE6.0ともっとも異なる点は、XML宣言に対応したことです。今までは、XML宣言をするとすべて互換モードとなっていましたが、 IE7.0では標準モードとなります。CSS2の仕様では、margin-leftとmargin-rightの値に autoを指定すると、(幅を持っている)ブロック要素の左右に等しいマージン(余白)が設けられ、ブロック要素がセンタリング(中央揃え)されることになっています。しかし、ウィンドウズ版 IEは互換モードだと margin-leftと margin-rightの値に autoを指定してもセンタリングされません。以上から、 IE7.0のブラウザでセンタリングされているケースでも IE6.0以下のバージョンではセンタリングされないケースがあるわけです。今までは互換モードで、Netscape、Firefox、Operaのブラウザでセンタリングされていても IE6.0でセンタリングされないケースがありましたが、今後は IE7.0と IE6.0の違いにも注意を払わなくてはなりません。

※ブロック要素のセンタリング方法については、別項の「ブロック要素をセンタリングする」をご参照ください。

【参考】↓

marginに autoの値を指定した際のセンタリング
標準モード 互換モード
Windows版IE6.0 ×
Windows版IE7.0 ×
Netscape (v6以降)
Firefox
Opera(v6以降)
(幅を指定した)ブロック要素をdiv要素で囲み、text-align: centerを指定した場合
標準モード 互換モード
Windows版IE6.0
Windows版IE7.0
Netscape (v6以降) × ×
Firefox × ×
Opera(v6以降) × ×
ブロック要素をdiv要素で囲み、text-align: centerを指定し、かつ、marginにautoの値を指定した場合
標準モード 互換モード
Windows版IE6.0
Windows版IE7.0
Netscape (v6以降)
Firefox
Opera(v6以降)

■関連ページ

XHTML/CSS・目次 | IE7の考察・目次

2006/12/01 編集(掲載内容は編集時のものです。)

CopyrighCopyright (C) 2006-2007 http://www.xml.vc/