Internet Explorer 7(Beta2)

Internet Explorerは、NetscapeやFirefox、Operaなど他のブラウザに比べるとCSSの対応がなっていない。
しかし、Windowsに標準搭載されていることから多くのPCユーザーがIEを使っているため、Web制作者にとっては非常に悩ましい存在です。

このIEが年内にもバージョン7が出る予定です。
タブ式ブラウズやRSSフィードへの対応、印刷機能の強化など、やっと他のブラウザに追いついたって感じですが。

そこでBeta版にてそのCSSの対応状況を、特にこれまでIEだけが対応していなかったCSSの設定について、少し検証してみました。

  1. position: fixed;
    この指定は、要素の配置を親要素に対して絶対的に配置し、なおかつ位置が固定され、ウィンドウをスクロールしても移動しません。
    従来のIEは未対応でしたが、IE7(Beta2)では対応していました。
  2. :hover
    マウスオーバー時のスタイルを設定する擬似クラスですが、従来のIEはaタグに対してしか対応していませんでした。IE7(Beta2)では、他のモダンブラウザ同様、aタグ以外にも対応していました。
    しかし、要素の前後にcontentを追加する擬似クラス":before",":after"は未対応のようです。
  3. CSSの切り替え
    IE以外のモダンブラウザは、制作者側が用意した複数のCSSファイルを切り替えることができます。例えば、CMSに移行される前の島根県のサイトなど、標準のCSSファイルとは別に、弱視の方のためにハイコントラストなCSSファイルが用意されていました(MT移行前のWillさんいんのサイトも用意していました)が、IEでは標準のCSSしか利用できませんでした。
    IE7(Beta2)になってもやっぱりCSSの切り替えは出来ないみたいです。
  4. 絶対的サイズ指定のフォント
    IE以外のモダンブラウザは、フォントを"font-size:12px;"などの絶対的サイズで指定してもブラウザで可変になりますが、IEだけはフォントサイズを変更することができません。これはIE7(Beta2)でも同じでした。非アクセシブルな仕様ですね。(もっとも、絶対的サイズを指定すること自体が非アクセシブルですが。)
  5. abbr要素(6月30日追記)
    これはCSSではなく、省略語を表すXHTMLの記述です。対応しているブラウザではtitle属性の値をツールチップとして表示しますが、従来のIEは未対応でした。(頭字語を表すacronymは対応)
    因みにこのサイトは、spanタグを利用してIEでも擬似的にabbrが表示されるようにしています。
    IE7(Beta2)では、ツールチップは表示されるものの、Firefoxなどのように下点線は表示されません。

まだいろいろ検証しなければなりませんが、とりあえず今後もIEはWeb制作者泣かせのブラウザなのかもしれません。
また、これまでIE対策のために施してきたブラウザハックがIE7で裏目に出ることも十分あり得ますしね。

#早速Willさんいんのサイトはトップページの画像やフッターの背景色が消えちゃってるし。(-_-;