インターネットエクスプローラは現在八割以上のシェアを占めていますが、その一方でCSSの実装に大きな問題点が多数見受けられます。
ここではインターネットエクスプローラでの問題点のうち、制作者が知る限りのものを解説します。
インターネットエクスプローラでの問題を回避するには (平成18年10月29日 更新)
マイクロソフト独自の注釈宣言で振り分ける (平成18年 3月10日)
以下、一部はインターネットエクスプローラ 7.0で改善されるものもあります。
font-sizeプロパティの単位を「em」にすると、文字サイズを「大」や「最大」に切り替えた際に文字が異常に大きくなる。(平成17年 8月21日 追記)
堀北真希うさぎem」単位の処理がおかしい事が知られております。直下セレクタなどに対応しない事に目をつけて、インターネットエクスプローラで扱うと拙いプロパティを、例えば以下のようにして記述する事も考えられます。
body>h1 {…}
しかしながら、インターネットエクスプローラの古いヴァージョンでは直下セレクタを子孫セレクタと誤認するものがあるのでこの手法を用いるのは危険です。
CSSを利用してサイトをデザインする場合、多くはインターネットエクスプローラ 4.x以降を基準にする事が多いのですが、4.xには実装上の不備があります。
致命的な欠陥とは言えませんが、細かなサイト作りには支障が出るでしょう。
ウィンドウズ版のインターネットエクスプローラ 5.0xにも不備があります。
4.xと違って、インライン要素でもdisplayプロパティでブロックレヴェル式の表示に切替える事が出来るようになり、その場合は反映されるようです。
逆にブロックレヴェル要素をdisplayプロパティでインライン式の表示にしてしまうとボーダ・パディング・マージンが付かなくなってしまいます。
現在特に最もシェアの高いウィンドウズ版インターネットエクスプローラ 6.xにも重大な不備があります。
意外に厄介な問題です。
例えば左右にmarginプロパティでマージンを取ってセンタリングする場合、widthプロパティで横幅を指定出来ません。
この状況である要素をfloatプロパティでフロートさせると同居しているテキストが消えて読めなくなってしまうのです。
ウィンドウズ版のインターネットエクスプローラはCSSの解釈がかなりバギーになっております。
具体的には子孫セレクタへのプロパティの継承が正しく行われない場合があるなどの問題があります。
マッキントッシュ版のインターネットエクスプローラ 5.xとウィンドウズ版の6.xには、標準モードと互換モードの二つの処理モードがあります。
インターネットエクスプローラ 4.xで実装されたCSSは、実は標準規格から見ると大きく懸け離れたものです。そこで、標準規格に合致した扱いをする標準モードと、従来のインターネットエクスプローラの実装に従う互換モードが用意された訳です。
標準モードと互換モードの切替えは、文書型宣言の書式に従います。原則的には文書型宣言を書いた文書は標準モードに、文書型宣言を書かなかった文書は互換モードになります。
ところで、XHTMLの場合、一行目に<?xml>宣言を入れなければなりません。ところが、ウィンドウズ版のインターネットエクスプローラ 6.xでは文書型宣言が文書の先頭に無いと、標準モードにならないのです(マッキントッシュ版の5.xでは問題無し)。
このため、ウィンドウズ版6.xでXHTMLを読込んだ場合、必ず互換モードになってしまいます。
幾つかありますが、代表的なものを挙げておきます。
標準規格では、<html>要素にもスタイルが適用出来ますが、互換モードでは<html>要素に当てたスタイルは無効になります。
標準規格ではtext-alignプロパティは内容となっているインライン要素に限り有効で、ブロックレヴェル要素には機能しません。
しかし、互換モードでは内容となるブロックレヴェル要素までも影響を受けてしまいます。これを利用してブロックレヴェルのセンタリングを行う事も出来ますが他のブラウザでは逆にセンタリングしません。
auto」値を当ててもセンタリング出来ない。標準規格ではこの様にしてブロックレヴェル要素をセンタリングする事になっておりますが、この方法が使えないのです。
このため、marginプロパティで左右にマージンを取る事でセンタリングさせたくなるのですが、そうするとウィンドウズ版6.xでの欠陥に嵌まる事になります。
詳しくはボックスの概念とプロパティの応用例１・ブロックレヴェル要素のセンタリングをご覧下さい。
標準規格では、ボーダ及びパディングの幅は、ボックスの幅には含みません。
つまり、インターネットエクスプローラの互換モードだとブロックの大きさが一廻り小さく表示される事になります。
精密に大きさを指定したブロックを並べようものなら、インターネットエクスプローラではブロック間に隙間が空く等の弊害が目に付く事でしょう。
インターネットエクスプローラは、ネットスケープ 4.xよりは標準に近いだけに厄介なものです。
ですが、この対策は実は簡単で、幾つかの方法があります。
CSSの記述で問題を回避する方法は、CSSの小技内の特定のユーザエージェントで適用しないスタイルに纏めておきました。
この他にも、HTML文書側の記述で対応する事も可能です。
ウィンドウズ版のインターネットエクスプローラ 5.0以降には、独自の注釈宣言がサポートされております。
この宣言を用いる事で、ウィンドウズ版インターネットエクスプローラのCSSの問題を回避出来ます。
ウィンドウズ版インターネットエクスプローラの特定のヴァージョンでのみ読み込ませたいCSSのスタイル定義ファイルをリンクするには、具体的には、以下のようにします。
<!--[if gte IE対応するIEのヴァージョン]>指定ヴァージョン以降のIEでのみ有効なコンテンツ<![endif]-->
<!--[if IE対応するIEのヴァージョン]>指定ヴァージョンのIEでのみ有効なコンテンツ<![endif]-->
前者は指定されたヴァージョン以降のインターネットエクスプローラでのみ有効なコンテンツを記述します。
よく見ると分かると思いますが、インターネットエクスプローラ以外では、以下のように両端を強調すればお分かりになると思いますが、ただの注釈宣言と見なされて無視される事になります。
<!--[if gte IE対応するIEのヴァージョン]>指定ヴァージョン以降のIEでのみ有効なコンテンツ<![endif]-->
--」が入ると文法上破綻する事になります。ですので、コンテンツの中に「--」を含めないようにして下さい(特に注釈宣言は絶対に入れてはいけません)。>」が入り、非常に古いウェブブラウザだとそこで注釈宣言が終わったと誤認するものもあるとの事です。制作者はそんなユーザエージェントを見た事はありませんが、このような理由から注釈宣言の途中に「>」を入れないようにすべきとしている者もいるようです。後者は指定されたヴァージョンのインターネットエクスプローラでのみ有効なコンテンツを記述します。
これも対応しない環境ではただの注釈宣言です。
5.5000」と記述する必要があります。前者の記述や他のヴァージョンではこのような問題は起こりません。5.0002と記述するのが正しいそうです。例えば、インターネットエクスプローラ 6.0 以降でのみ有効なスタイル定義ファイルをリンクするには、以下のようにします。
<!--[if gte IE 6.0 ]> <link rel="stylesheet" type="text/css" href="CSSのURI" /> <![endif]-->
gte」を「lte」とする事で逆に「あるヴァージョン以前」と言う条件判断も出来ますが、インターネットエクスプローラ 4.xでは実装されていないため無効となりますので注意しましょう。逆にインターネットエクスプローラ以外でのみ読ませたいスタイル定義ファイルのリンクには幾つかの方法がありますが、以下のようにすれば良いでしょう。
<!--[if lte IE 4.000 ]><!--> <link rel="stylesheet" type="text/css" href="CSSのURI" /> <!--<![endif]-->
ここでは、
<!--[if lte IE 4.000 ]>」の直後に「<!-->」<![endif]-->」の直前に「<!--」をそれぞれ入れたのがポイントです。
<!--[if lte IE 4.000 ]>」で指定された「インターネットエクスプローラ 4.0以前」を満たせないため無効なコンテンツとして無視し、<!--[if lte IE 4.000 ]><!-->」と末尾の「<!--<![endif]-->」を注釈宣言と認識するため、間に書かれた<link>要素はコメントアウトされずに認識される事となります。
