0 この頁の本文へ

関連ページ

ページ案内

2 サイト表紙
3 しらぎくさいと実験室
4 雑記帳
インターネットエクスプローラ 7のCSS

インターネットエクスプローラ 7のCSS。

平成18年 2月 1日公開
平成18年10月19日更新

ウィンドウズ・インターネットエクスプローラ 7のCSSの実装についてのメモです。

インターネットエクスプローラ 7のCSS実装に関してのご注意。

この記事は、平成18年10月19日に英語版正式配布となったウィンドウズ・インターネットエクスプローラ 7に関するものです。しかしながら、過日公開されていた正式版候補と実は大差無いようで、本記事も平成18年10月19日の更新に於いては特に変更している箇所は殆どありません。

インターネットエクスプローラ 7のCSS・目次。

インターネットエクスプローラ 7のCSS実装に関して、見て分かった事 (平成18年10月19日更新)
インターネットエクスプローラ 7のCSS実装に関しての感想 (平成18年10月19日更新)
CSS以前にインターネットエクスプローラ 7において問題だと思う事
インターネットエクスプローラ 7のユーザエージェント文字列などについて
インターネットエクスプローラ 7でのPNG画像の実装 (平成18年 4月25日追加)
インターネットエクスプローラ 7対策 (平成18年10月19日追加)

インターネットエクスプローラ 7のCSS実装に関して、見て分かった事。(平成18年 8月25日追記)

インターネットエクスプローラ 7のCSSの実装を調べたところ、以下のようになっていました。

尚、以下の点で問題点として挙げているものに関しては、平成18年 8月25日にリリースされた第一正式候補版でも改善されておりません。マイクロソフトではCSSに関する最終調整を行ったとの事で、~~正式版でも改善されない可能性が高いと思われます~~。正式版でも改善される事はありませんでした。

XHTML文書でも標準準拠のボックスサイズの計算になっている

ウィンドウズ版の6.0までは、XHTML文書では冒頭に付いた<?xml ?>処理命令などにより、後方互換の扱い(ボックスの幅や高さにボーダやパディングを含めるなど)になっていましたが、そのような問題は解消されているようです。

属性セレクタなどを認識している

○○[title]セレクタを認識しているようです。

このため、属性セレクタを含める事で、IEでは都合の悪いプロパティ定義を回避すると言うテクニックは使えなくなります。

つまり、

○○ {
    IE向けのプロパティ定義
    }

○○, [version]
    IE以外向けのプロパティ定義
    }

と言うテクニックは効かなくなります。

ファイヤーフォックスやオペラ並とまで行かなくても、標準に高水準に準拠していれば、こんなテクニックは不要なのですが、残念な事に相変わらず幾つかの問題を抱えております。
代わりの方法があるとの事ですので、これを利用する事になるでしょう。但し、代わりの方法は逆にIE 7.0でのみ有効なスタイルとなります。(平成18年 8月25日)

:before擬似要素及び :after擬似要素を認識していない

:before 疑似要素及び :after疑似要素を用いたプロパティが相変わらず無効になっております。

position: fixed;の実装

このプロパティは正常に機能しているようです。

擬似フレームなどを実現するには、このプロパティの実装が欠かせません。

「_」で始まるプロパティ名が無効になる事

6.0までのIE独自実装に対応するため、この不正なプロパティ名を用いている方もいるかも知れませんが、このプロパティは認識されません。

この事により、IEでの問題点を回避するテクニックとして使えない事となります。

代わりの方法があるとの事ですので、これを利用する事になるでしょう。(平成18年 8月25日)

マージン(要素の周りの余白)に関するバグがまだ残っている

制作者が個人的に頭を抱えた問題点です。

マージン(要素の周りの余白)に関する実装はインターネットエクスプローラ 6.0と同じなのです。

~~しかも、この問題を回避するためのテクニックが一切使えなくなります。~~

相変わらず@import規則にメディアタイプを指定するとインポートしない

折角、position: fixed; が有効なのに、これが使えないのは惜しい限りです。

いや、IE 7.0以降も厄介な問題があるため、これは弾きの方法として使うと良さそうです。 (平成18年10月19日)
この規則はIE 6.0以前だけでなく、オペラ 6.x以前でのCSS実装不備を回避するのに使えます。

当面、マイクロソフト独自の注釈宣言でIE 7.0以降専用のスタイルを読み込ませる以外の対処は無さそうです。

複数行に跨るインライン要素の背景画像が反映されなくなった(平成18年10月19日更新)

従来は一行目のみに反映されたのですが、平成18年 4月24日リリース版以降では二行以上に跨る場合には全く反映されなくなりました。

つまり、改善されたどころか改悪されてしまったのです。

制作者は<em>要素に背景画像を用いているため、これも個人的には厄介な問題です。

ブロックレヴェル要素の背景色が正しく反映されない場合がある(平成18年10月19日追加)

状況に依っては、テキストの上端と要素の上ボーダ(上ボーダが無い場合は上パディングと上マージンの境界)に隙間が出来る場合があるようです。

この場合、隙間の幅分のマイナス上マージンと、それを補う上パディングを与える事で何とか見られるように出来るでしょう。

相変わらず、inherit値を認識しない(平成18年 2月 2日追記)

これも結構厄介な問題です。

*+htmlの下位セレクタが有効(平成18年 8月25日追記)

一般に、HTML文書に於いて*+htmlを満たす要素は存在しないため、これの下位要素も存在せず、従ってこのセレクタの下位セレクタでのプロパティ定義も意味を成しません。

しかしながら、インターネットエクスプローラ 7では、通常のhtmlセレクタと同じように扱われるので、これを用いる事に依り、インターネットエクスプローラ 7に対して独自のプロパティを与える事は可能のようです。

インターネットエクスプローラ 6.x以前では* htmlの下位要素セレクタと言うものが有効なので、これとセットで利用する事もあると思われます。

目次に戻る

インターネットエクスプローラ 7のCSS実装に関しての感想。(平成18年10月19日更新)

インターネットエクスプローラ 7のCSSの実装に関してざっと調査してみましたが、正直なところ、まだまだファイヤーフォックスやオペラの実装には遠く及びません。

恐らく、現時点では、属性セレクタなどインターネットエクスプローラ 6.0まででは実装していなかった機能を追加しただけで、肝心の実装分の不具合の修正にはまだ至っていないのではないかと思います。

しかも、今までの回避策が全然使えなくなるため、却って問題をもたらしているとさえ言えます。

ただ、全部直せと言っても無理でしょうから、制作者個人としては、

複数行のインライン要素での背景画像の反映
マージン(要素の周りの余白)の仕様に則った実装
~~@import規則のメディアタイプを認めた実装~~

をお願いしたいところです。

しかしながら、CSSに関しての最終調整はもう終わったとの事で、これらの要望は実現しないと思われます。(平成18年 8月25日)

目次に戻る

CSS以前にインターネットエクスプローラ 7において問題だと思う事。

インターネットエクスプローラ 7に関しては、他にも幾つか問題があるようです。

相変わらずMIMEタイプ・content-type: application/xhtml+xmlを認識しません

つまり、XHTML ベーシックやXHTML 1.1 以降の文書を公開する場合は、少なくともIE 7以前に対してはcontent-typeを「text/html」で配信しなければなりません。

稀に実装していないIEが悪い、application/xhtml+xmlで配信すべきだと言う主張する者もいるようですが、それは閲覧を妨害する行為であり、アクセシビリティ上最悪の行為と言えます。

インターネットエクスプローラ 7は、兎に角異常に重い事

これでは、一般人にとって非常に利用し難いのではないかと思います。

目次に戻る

インターネットエクスプローラ 7のユーザエージェント文字列などについて。

インターネットエクスプローラ 7のユーザエージェント文字列は、

Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; SV1; .NET CLR 2.0.50727)

でした(末尾の「.NET CLR 2.0.50727」は制作者が .NET 実行環境 2.0をインストールしている事によるものです)。

つまり、Mozilla/5.0 (ファイヤーフォックスなどのもじら系ブラウザやサファリが用いている)を名乗ったりはしないようです。

また、リクエストヘッダの ACCEPT フィールドも IE 6.0同様

image/gif, image/x-xbitmap, image/jpeg, image/pjpeg, application/x-shockwave-flash, */*

となっており、「application/xhtml+xml」「image/png」が含まれておりません(個人的にはどうでもいい事ですが…)。

目次に戻る

インターネットエクスプローラ 7でのPNG画像の実装について。(平成18年 4月25日)

制作者はアンチPNGで、PNG画像は絶対に利用しないので全く問題視しておりませんでしたが、インターネットエクスプローラ 6.0ではアドビ社の『フォトショップLE』などで作成したPNG画像が真っ黒になって表示出来ませんでした。

この点も改善されているようです。

目次に戻る

インターネットエクスプローラ対策。(平成18年10月19日追加)

現実問題として、執るべき対策を挙げておきましょう。

CSSでのスタイル定義に於いて、インターネットエクスプローラを忌避するには。

一番簡単なのはインターネットエクスプローラでのみ認識されるセレクタを活用する事でしょう。

インターネットエクスプローラ 7を含むインターネットエクスプローラを忌避する

特定のセレクタのみを忌避する場合

html>/**/body 忌避したいセレクタ { … }

間にコメントを挟む事で、誤作動するようです。

忌避したいセレクタを一本のスタイルシートに纏めている場合

@import "忌避したいスタイルシート" screen, projection;

オペラ 6.x以前もこの方法で排除されます。

インターネットエクスプローラ 7より前のインターネットエクスプローラを忌避する

html>/**/body 忌避したいセレクタ { … }

実際のところ、本質的にCSSの処理は大して変わっていないので、余り使う事は無いかも知れません。
- 但し、インターネットエクスプローラ 7ではposition: fixed;などに新機能が加わったので、その辺りで有用になるかも？

または、属性セレクタを併用する手もあります。

特定のIDを忌避する場合

○○#△△[id="△△"] { … }

特定のクラス名を忌避する場合

○○.△△[class="△△"] { … }

この他、(無意味な)属性セレクタと同じグループのセレクタも、スタイル定義が適用されなくなります。

例えば以下の場合、インターネットエクスプローラ 6.x以前では、有効である筈のp.classセレクタも無効になります。

p.class, [version] { … }

CSSでのスタイル定義に於いて、インターネットエクスプローラでのみ適用するには。

インターネットエクスプローラ 7でのみ適用する

*+html 適用したいセレクタ { … }

<html>要素の直前には何の要素も存在しないので、この隣接セレクタの下位要素も本来なら存在し得ず、従って一般にはこのスタイル定義は意味を持ちません。

インターネットエクスプローラ 7より前のインターネットエクスプローラでのみ適用する

* html 適用したいセレクタ { … }

<html>要素の上位には何の要素も存在しないので、この下位セレクタの下位要素も本来なら存在し得ず、従って一般にはこのスタイル定義は意味を持ちません。

また、インターネットエクスプローラ 6.x以前に於いて、特定のプロパティのみ有効にしたい場合には、当該プロパティ名の前に_をつけるという方法もあります(文法違反ですが)。

この他にも、マイクロソフト独自の注釈宣言を利用する方法もあります。

この方法はAnother HTML-lintで減点されると言うデメリットもあります。

目次に戻る

ページ外へのご案内。

制作者へのご連絡