ＣＳＳ応用編
-6 IE7への対応
IE7の誕生
2006年10月 マイクロソフト社が、IE6発売より５年ぶりのバージョンアップとなる新しいブラウザ、IE7を発売しました。
W3C仕様への準拠を念頭に開発された、と言われています。
つまり、いままで Web制作者の頭を悩ませ続けてきた ブラウザ間の実装差異の解消に向けて、着実に前進した、と言えるわけです。
ですが、
実際にはIE7も、まだまだ完全とはいえないようです。不具合も数多く報告されていること、解消されるべきバグが引き続き残っていること、などなど、Firefoxや Safariなどの新しいブラウザの水準にまでも達していないと、けなされた評価も受けているようです。 （2007年1月・記）
当方が、なにより懸念するのは、今まで ブラウザの独自解釈を基準にしてデザインを行ってきたコンテンツが、「IE７で閲覧したことによってトラブルが生じる」という事象が発生する可能性について、です。
特に スタイルシートへの対応において。
セキュリティやJava Scriptなどにまつわる問題の可能性も指摘されているようですが、このサイトの主旨から ここでは、CSSに関わる点について、関連サイトや雑誌などに紹介されている内容を個人的にまとめてみようと思います。
IE7で新しく対応可能になったもの
セレクタへの対応
「ある親要素の直下のタグ（子要素）への設定」
例： <p> の中の <strong> へスタイルを設定する
p > strong { color : white ;}
「同じ親要素を持ち、かつ前要素の次に出現する特定の要素への設定」
例： <body> の中で <ul>の次にくる<p>へスタイルを設定する
ul + p { color : white ;}
注： <ul></ul>でひとつの要素なので、<ul>に続くli>を「次に出現する要素」とはしない。
「指定された属性を持つ要素への設定」
例： href属性を持つすべての <a> へスタイルを設定する
a[href] { text-decoration : none ;}
例： #topという属性値を持つすべての <a> へスタイルを設定する
a[href="#top"]] { text-decoration : none ;}
厳密には他の疑似要素など、対応可能になったセレクタはありますが、一般的に多く使用されると思われるものを上げました。
これらのセレクタ設定に これまでハックを使用してきたサイトは、今回の対応変更により影響を受けると言われています。
ただし、これらは IE7 標準モードでのお話です。
ボックス拡張
overflow : visible ;
従来、領域を指定したボックスに入れたコンテンツが収まりきらない時には、ブラウザが勝手に判断しボックスを拡張させる、という問題がありました。
「overflow : visible 」＝領域指定を無視して、収まりきらないコンテンツも表示する
IE6の解釈は 常にこの状態だったと言えます。
つまり、今回 overflow : visible に対応したということで、従来通り ボックスを拡張させて表示したい場合には、指定することが求められるということだと思います。（未検証です）
従来、ボックスが内容に応じて拡張することを前提として作っていたサイトでは、この変更に際し、なんらかの影響が出る、とされています。
ボックスサイズ
min-width / max-width / min-height / max-height
ウインドウサイズが増減しても、設定したボックスサイズを維持します。
例えば、ブラウザ幅を極端に狭めても、min-widthの設定があれば、それ以下のwidthにはならずに 自動的にスクロールバーが出るわけです。
これも 標準モードの場合のみ、対応します。
XML宣言
<?xml version = "1.0" encoding = "Shift_JIS"?>
XML宣言を付けると互換モードになる、という問題は解消されます。
つまり、XML宣言のついているサイトは、IE6では互換モードに、E7では標準モードに、という表示のされ方をするので注意が必要とされています。
通用しなくなるハック
当サイト 作成編 ４「ボックスモデルの解釈」でご紹介した、CSS書式の { と } の間で、通常の指定とハックが混在するようなやり方は、今後 避けるべきです。
同様に html > body の指定も Opera対策として使用していましたが、IE7では読み込まれることになったので、従来のように「IE以外」というようなくくりで分類することができなくなり、「IE6以前とそれ以降」という使い分けを強いられます。
IE6用に使用していた *html の形式なども使えなくなります。
条件分岐コメントを使って、各ブラウザバージョンごとにスタイルシートを振り分けて設置していたサイトに関しては、大きな影響を受けないでしょう。（未検証です）
トラブルが発生しやすいサイトの例
・ DOCTYPE宣言の前に XML宣言をつけている
・ IE 専用のCSSが IE7 にも適用されるようになっている
・ IE7 では無効となるハックを多用している
と、言われています。
ただし、IE7でトラブルが生じた場合、必ずしもCSSによるものだけではなく、Java Scriptなど複数の事項が要因となる場合があります。
この件については、今後 検証していく所存です。
