Internet Explorer 7.0 に関するカスケードスタイルシートの互換性

Internet Explorer 7.0 に関するカスケードスタイ...

低帯域幅での表示をオンにする

Markus Mielke

Dave Massy

Microsoft Corporation

January 31, 2006

Updated July 7, 2006

日本語版最終更新日 2006 年 9 月 13 日

注 : この情報は暫定的なものであり、変更されることがあります。

概要

Internet Explorer 7 では、カスケードスタイルシート (CSS) の解析と表示に関して多くの機能強化が行われました。これらの機能強化は、Internet Explorer によるカスケードスタイルシートの解析方法を W3C 勧告に近づけ、開発者が当てにできる機能を提供することを目的に行われました。

この変更により、既存のコンテンツが IE6 と互換性のない方法で表示される場合が若干あります。たとえば、IE 7 で表示すると、要素がページ内の別の領域に移動したり、コンテンツが重なって表示されるなどの現象が見られます。これらの問題は、IE 6 の標準準拠モードで発生していた問題を回避するための CSS 構造を使用している場合に最も多く見られます (このような構造は ”ハック” またはフィルタと呼ばれていました)。この資料では、変更された CSS のサポートによりページの表示が崩れる理由と、この問題に対処する最善策を紹介します。

互換性への取り組み

Internet Explorer チームでは、開発者が優れたソリューションを構築するためのプラットフォームを提供する上で "互換性" は不可欠なものと考えています。新しいバージョンのブラウザでは、強化機能と新機能を追加するだけでなく、既存のコンテンツも引き続き表示できるようにする必要があります。これらの矛盾するような目的を達成するために、コンテンツを解釈する際には互換モードと標準準拠モードと呼ばれるものを用意しています。標準準拠モードのサポートは Internet Explorer 6 で導入され、HTML ページの先頭にある宣言によって判断されます。また、互換モードでは、互換性を確保して、既存のコンテンツが以前のバージョンの IE と同じように表示されるようにしました。これに対して、標準準拠モードについては、W3C 勧告に準拠するように開発を進めたため、既存のコンテンツに影響する変更も加えました。

Internet Explorer 6 で発生する CSS の解析と表示に関する問題の多くについては、 http://www.quirksmode.org/ (英語) などのサイトで詳しく説明されています。

IE で使用される CSS については、IE 6 の標準準拠モード使用時に発生していた問題を修正することは、結果的にページの表示方法が変更されたとしても、適切な判断だと考えています。

IE7 で表示が崩れるページに対処する

Internet Explorer 7 で表示すると以前のバージョンの IE で表示した場合と異なるページについては、まず問題の原因を特定し、最も効率的な対応策を導く必要があります。

ユーザーエージェント文字列とブラウザ検出

IE 7 で行われた CSS 変更による影響について説明する前に、もう 1 つの一般的な互換性の問題を減らす必要があります。ブラウザの種類とバージョンに応じて異なるコンテンツを提供していても、IE 7 によるアクセスを想定していないサイトが存在します。これは、ユーザーエージェント文字列の検索により行われます。詳細については、「Detecting Internet Explorer More Effectively」(英語) を参照してください。

CSS のボックスモデルに影響を与える XML プロローグに関する問題

XML プロローグは、使用する XML のバージョンを指定するためのもので、Web では XHTML と組み合わせて使用されることが多いものです。既に説明したように、IE 6 では、互換モードと標準準拠モードの切り替えを行う方法を導入しました。この切り替え命令は、ページの 1 行目に記述する必要があります。残念ながら、XML プロローグを使用する場合にも同じ条件が適用されるため、XML プロローグを使用するページでは、この切り替え命令より前に XML プロローグが記述されてしまいました。そのため、IE 6 では、ページの作成者の意図に反して、標準準拠モードで表示する予定のページが互換モードで表示されることがありました。IE 7 では、この問題を修正しました。IE 7 では、XML プロローグを記述した後に、標準準拠モードを指定して、XHTML を適切に表示できるようにすることができます。IE では HTML 仕様に従って標準互換モードでコンテンツを表示するのが望ましいのですが、残念なことに、標準準拠モードでコンテンツが表示されないことを前提に作成されているページがあります。XML プロローグに関して行った修正による表示の問題は簡単に特定できます。ページのソースを表示し、先頭の 2 行を確認します。XML プロローグと標準準拠モードの <!DOCTYPE> が記述されていて、そのページで表示に関する問題が発生する場合は、そのページのコンテンツを更新することをお勧めします。

ボックスモデルに関する変更点

IE 7 では、CSS 2.1 のボックスモデルに準拠するように、オーバーフローの動作を変更しました。オーバーフローは、ブロックレベル要素のコンテンツが、ボックスをオーバーフローした場合、その要素をボックスの中にすべて収めて表示するかどうかを指定する方法です。既定値は visible です。この値 (visible) は、コンテンツをすべてボックス内に収めて表示しないことを指定します。つまり、コンテンツがボックスの外に表示されることがあります。以前のバージョンの IE では、この動作はサポートされていませんでした。コンテンツは常にボックスのサイズ内に収まる必要がありました。たとえば、幅と高さが、それぞれ 100px のボックスがあるとします。コンテンツが、このサイズよりも小さい場合、IE では指定どおりにコンテンツが表示されました。コンテンツが、このサイズよりも大きい場合、IE ではボックスを自動拡張してコンテンツが表示されるようにしていました。次のサンプルコードでは、この動作を例示します。

<style type="text/css">
div        { width : 100px; height: 100px; border: thin solid red;}
blockquote { width: 125px; height: 100px;
             margin-top: 50px; margin-left: 50px;
             border: thin dashed black}
cite       { display: block;
             text-align: right;
             border: none}
p          { margin: 0;}
</style>
<div>
  <blockquote>
    <p>some text long enough to make it interesting.</p>
    <cite>- anonymous</cite>
  </blockquote>
</div>
    }
}

次の画像は、このサンプルコードを IE 6 で表示した場合を示しています。

次の画像は、同じコードサンプルを IE 7 で表示した場合を示しています。

これらの画像からわかるように、IE 7 ではボックスの高さと幅が指定どおりに表示されます。この例では、 <blockquote> に指定されているコンテンツが親要素 <div> (赤い境界線のボックス) の範囲外に表示されます。

コンテンツが指定のボックスサイズに収まらない場合に、ボックスのサイズが IE によって自動拡張されることを前提としたレイアウトを採用していると、IE 7 で表示が崩れることがあります。オーバーフローに関する表示の問題は、IE 7 で表示したときに、コンテンツが突然他のコンテンツに重なって表示されるようになるかどうかを判断することで簡単に特定できます。

CSS フィルタ

CSS のような標準は利用できますが、CSS を使用したページが、すべてのブラウザで同じように表示されることは保証されていません。CSS 標準には未定義の部分、すべてのブラウザベンダで同様に実装されていないコンポーネント、および既存の実装に問題があったりすることがあります。また、特定のバージョンのブラウザを対象とする方法が提供されていません。そのため、Web 開発者コミュニティで CSS フィルタ (別称、CSS ハック) を開発しました。これらのフィルタでは、ブラウザのバグまたは未実装の機能を利用して、特定のブラウザから CSS スタイルのルールを隠していました。これらのバグを修正して CSS のサポートを強化することによって、一部の CSS フィルタが機能しなくなります。

このようなフィルタを使用している場合は、その影響について理解する必要があります。長期的には、この変更は、今後リリースされるバージョンの Internet Explorer や他のブラウザにより強化される CSS サポートを効果的に適用するデザインを作成するのに役立ちます。

IE 7 では、以前のバージョンの IE で次のフィルタが動作しない原因となっていたパーサーに関する多くの問題を修正しました。これらのフィルタをページで使用している場合は、フィルタを削除するか、別のフィルタに置き換えてください。この資料の最後では、安定したバージョンの IE を対象とする他の方法を紹介します。

* HTML フィルタ

この CSS フィルタは、パーサーのバグを利用しています。このフィルタは、ルールが Internet Explorer にのみ関係があることを示すために使用されていました。この構成は、Internet Explorer 7 以降では無視されます。

/* 次のルールは IE のみに適用されていましたが
   IE 7 以降では無視されます */
* html{ 
}
* html body{
}
* html .foo{
}

_ アンダースコアフィルタ

この CSS フィルタは、パーサーのバグを利用しています。このフィルタは、プロパティが Internet Explorer にのみ関係があることを示すために使用されていました。Internet Explorer 7 以降では、この構造はカスタムプロパティとして処理されます。カスタムプロパティは、OM にあり、スクリプトを使用して照会することはできますが、その値がネイティブに適用されることはありません。

/* 次のルールでは、min-height プロパティに対応して
   いるブラウザと IE に高さの最小値が適用されて
   いました。IE 7 では、_height はカスタム プロパティ
   として処理され、高さは適用されません */
.myclass {
   min-height: 300px;
   _height: 300px;
   ...
   }

/**/ コメントフィルタ

この CSS フィルタは、パーサーのバグを利用しています。このフィルタは、標準準拠モードの場合に、Internet Explorer からのみプロパティを隠していました (このフィルタは互換モードでは動作しませんでした)。Internet Explorer 7 では、このプロパティは解析され適用されます。

/* 次のルールは、Internet Explorer に対して height
   プロパティを隠すために使用されていましたが、
   IE 7 では、値が適用されます */
.myclass {
      height/**/: 300px;
   ...
   }

"html > body" 子セレクタフィルタ

この CSS フィルタは、以前のバージョンの Internet Explorer で実装されていない機能を利用しています。このフィルタは、Internet Explorer のみから宣言を隠していました。IE 7 以降では、宣言内のプロパティが適用されます。

注: 子セレクタに依存する CSS スタイルルールは、特定のブラウザやブラウザのバージョンを検出するために使用されている場合にのみ CSS フィルタであると見なされます。

/* 次のルールは、Internet Explorer に対して height
   プロパティを隠すために使用されていましたが、
   IE 7 では、値が適用されます */
html > body {
      height: 300px;
   ...
   }

"head + body" 隣接セレクタフィルタ

注: 隣接セレクタに依存する CSS スタイルルールは、特定のブラウザやブラウザのバージョンを検出するために使用されている場合にのみ CSS フィルタであると見なされます。

/* 次のルールは、Internet Explorer に対して height
   プロパティを隠すために使用されていましたが、
   IE 7 では、値が適用されます */
Head + body {
      height: 300px;
   ...
   }

”head:first-child + body” 最初の子と隣接セレクタによるフィルタ

この CSS フィルタは、以前のバージョンの Internet Explorer に実装されていない 2 つの機能 (:first-child 擬似クラスと隣接セレクタ) を利用しています。このフィルタは、Internet Explorer のみから宣言を隠していましたが、IE 7 以降では、宣言内のプロパティが適用されます。

注: :first-child セレクタと隣接セレクタを組み合わせた CSS スタイルルールは、特定のブラウザやブラウザのバージョンを検出するのに使用された場合にのみ CSS フィルタと見なされます。

/* 次のルールは、Internet Explorer に対して height
   プロパティを隠すために使用されていましたが、
   IE 7 では、値が適用されます */
head:first-child + body {
      height: 300px;
   ...
   }

ページの表示が崩れる場合の対処法

このセクションでは、問題の回避策を提示します。

overflow:visible の既定の動作を回避する

幅や高さを指定していない場合、ボックスのレイアウトは、IE 6 の場合とほぼ同じように動作します (ただし、非常に長い文字列を指定していたり、ボックスより前にビューポートをオーバーフローさせるコンテンツがある場合を除きます)。このような場合は問題ありません。

新しい動作により、ページの表示が崩れるのは、次の 2 つの場合です。

コンテンツに幅や高さを設定していて、コンテンツのサイズが設定したサイズよりも大きいことを把握していない場合。

この問題は、簡単に解決できます。コンテンツの正確なサイズを特定し、ボックスにそのサイズを指定します。サイズは Developer Toolbar のルーラーを使用して特定できます。

ボックスのサイズを実行時に変更する必要がある動的なコンテンツがある場合。この問題は、コンテンツを動的に挿入したり、フォントのサイズを指定していない場合に、ユーザー設定でフォントのサイズが変更された場合に発生します。

オーバーフローに関する問題の修正により発生する問題を解決できる min/max width/height プロパティを使用した宣言型のソリューションがあります。次の例を考えてみましょう。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Strict//EN">
<html>
<title>
   CSS: Overflow:visible と Min/Max
</title>
<style>
.DivClass1
{
    background:orange;
    width:150px;
    height:100px;
}
</style>
    <body>
        <div contenteditable=true class=DivClass1>
        これは幅と高さが 100 ピクセルに設定された DIV 要素です。IE 6 では、
        DIV 要素の高さはコンテンツの高さに合わせて調整されますが、IE 7 では 
        DIV 要素の高さは指定どおり 100 ピクセルです。そのため、テキストの
        オーバーフローが発生し、テキストはボックスの外側に表示されます。
        </div>
    </body>
</html>

新しい min-height プロパティを使用して、IE 7 などの最新ブラウザにおける動作を修正できます。以前のバージョンの IE で動作が変更されないようにするためには、条件分岐コメントを使用することをお勧めします。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Strict//EN">
<html>
<title>
    CSS: Overflow:visible と Min/Max
</title>
<!-- IE 7 以前のバージョンの IE のみで読み取られます-->
<!--[if lt IE 7]>
   <link rel="stylesheet" type="text/css" href="Demo/iestyles.css" /> 
<![endif]--> 
<style>
.DivClass1
{
    background:orange;
    width:150px;
    min-height:100px; // IE6 では無視されます
}
</style>
    <body>
        <div contenteditable=true class=DivClass1>
        これは幅と高さが 100 ピクセルに設定された DIV 要素です。IE 6 では、
        DIV 要素の高さはコンテンツの高さに合わせて調整されますが、IE 7 では 
        DIV 要素の高さは指定どおり 100 ピクセルです。そのため、テキストの
        オーバーフローが発生し、テキストはボックスの外側に表示されます。
        </div>
    </body>
</html>

iestyle.css では、IE 6 以前の動作を指定できます。

.DivClass1
{
    height:100px; // min-height に対応していないバージョンにのみ適用されます
}

条件分岐コメントを使用することにより、以前のバージョンの IE の動作と、標準により準拠している IE 7 の動作を簡単かつメンテナンスしやすいように分けて管理することができます。

CSS フィルタの機能強化により表示が崩れるページ

IE 7 の標準準拠モードでページのデザインが崩れる場合、回避策としては次の 3 つのオプションがあります。

標準に基づいた、ブラウザ間で互換性のあるデザインを作成します。ページを簡略化することにより、問題を解決し、メンテナンスにかかるコストを削減できることがあります。
条件分岐コメントを使用して、Internet Explorer のみに関する問題を回避します。
CSS フィルタを使用する必要がある場合は、以前のバージョンのブラウザのみを対象としたフィルタを使用することを検討します。これにより、今後、問題が発生する可能性を抑えることができます。

条件分岐コメントを使用する

条件分岐コメントは、Microsoft Internet Explorer 5 で導入された、IE ブラウザの種類とバージョンを特定する簡単で管理しやすい方法です。構文はコメントベースなので、他のブラウザではステートメントは無視されます。これは、IE を対象とする * HTML フィルタなどのフィルタの代わりに使用するのに適しています。コードを見やすくするため、条件分岐コメントでは、IE 固有のスタイルシートへのリンクを設定することをお勧めします。

<!--[if IE]>
    <link rel="stylesheet" type="text/css" href="iestyles.css" />
<![endif]-->

CSS フィルタを効率的に使用する

IE チームでは、ブラウザの動作の差異を回避するための労力を認識しています。CSS フィルタは、次の 2 つの規則を考慮すれば本質的には問題のあるものではありません。

最新バージョンよりも古いバージョンのブラウザ (変更が生じないか、または開発が終了したブラウザ) のみを対象とする。この規則を考慮すると、フィルタが新しくリリースされたバージョンのブラウザで問題を引き起こすことはありません。たとえば、IE 5.5 以前のバージョンのみを対象としたフィルタがありますが、このようなフィルタは、使用しても比較的問題が発生することはありません。
フィルタであることを認識する。フィルタにより表示が崩れる場合でも、フィルタを整備して引き続き使用できるようにします (たとえば、以前のバージョンのブラウザ用のセキュリティ修正プログラムがリリースされた場合などには、フィルタにより表示が崩れることがあります)。フィルタであることが明確にわかるようなコメントを記述します。

互換性に関するニーズの均衡

開発者コミュニティからは、標準により準拠した表示動作になるようにして欲しいというフィードバックが以前から寄せられていました。IE チームでは、この要求とページの表示が崩れないようにして欲しいというユーザーからの要求の均衡を保ってきました。この均衡を保つため、IE 6 ではページの作成者が標準により準拠した表示を選択できる標準準拠モードを導入しました。非標準互換モード (互換モード) で記述されたページは、IE 7 で表示した場合、動作に変更はありませんが、動作しなくなった CSS フィルタの影響は受けます。標準準拠モードでは、標準により準拠するように変更を重ねてきました。また、これからも、そのように変更を行っていきます。その結果、以前の標準準拠モードで表示するように作成されたコンテンツは、標準により準拠するために加えた動作の変更により正しく表示されなくなる可能性があります。この問題は、動作しなくなった CSS フィルタについて発生していますが、これらのフィルタは、CSS の仕様ではなく、特定の動作の実装に依存していたために発生しています。

この資料が、IE 7 で発生する CSS の互換性に関する根本的な問題を理解するのに役立ち、このような問題を軽減するのに役立つ対策を提供できたならば幸いです。

Markus Mielke と Dave Massyは、Internet Explorer チームのプログラムマネージャです。

ページのトップへ

プロファイル (個人情報) の管理 | お問い合わせ先 | MSDN Flash ニュースレター | 日本での個人情報の取り扱い | サイトマップ

概要