てんぽ: IE6のCSSバグを視覚的にチェック

CSSやHTML、FC2ブログのカスタマイズ、共有テンプレートなど

スポンサーサイト

--年--月--日(--)

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
#
カテゴリ:スポンサー広告

IE6のCSSバグを視覚的にチェック

2008年02月03日(日)

IE用Acidテストとも言えるCSSバグのチェックページを作ってみました。 IE6で表示するとすべてのチェック項目で「NG」と表示されますが、正しい表示を行うブラウザなら「OK」と表示されるはずです。


具体的にはどうやっているかというと、たとえば「position: absoluteが指定されたボックスの幅をパーセントで指定したとき、 幅の参照先を、そのボックスの包含ブロックではなく、間近の親要素にしてしまうバグ」をチェックするコードは以下のようになっています。

<div class="container">
 <div class="div1">
  <div class="div2"></div>
 </div>
</div>
.container {
 width:100px;
 position:relative;
}

div1 {
 width:50px;
}

.div2 {
 width:100%;
 position:absolute;
 background: url(white.png) right no-repeat;
}

div2の幅は、width: 100%=その包含ブロックの幅です。 div2にはposition: absoluteが指定されているので、その包含ブロックは祖先要素のうち最も近いpositionの値がstaticでないもの、すなわちcontainerとなります。 したがってwidth: 100%=100pxです。しかし、IE6はdiv1を包含ブロックと見なすのか、div2の幅を50pxとしてしまいます。

さてここで、containerには幅100pxの背景画像が指定されており、左側半分にOK、右側半分にNGと描かれています。 さらにdiv2は50pxの真っ白な背景画像を右端に表示するようになっています。 つまり、IE6では50pxのdiv2は全面が白い画像で敷き詰められ、containerの左半分のOKの文字を隠しますが、 正しい表示を行うブラウザでは100pxのdiv2の右側半分の白背景がNGの文字を隠すわけです(OKは隠れない)。

このようにIE6特有のバグを利用して、正しいブラウザとは異なる表示結果を意図的に作り出しています。 ほかのバグについても思いついたら追加していこうと思います。

(現在の表示の仕方ではclear関連のバグをテストするのは難しいかも。まぁCSSパズルみたいなものです。)

#143
カテゴリ:HTML・CSS
タグ[ CSS IE ]

(-3件)

かおる:Re: IE6のCSSバグを視覚的にチェック

凄いですね!どんなスクリプトなのだろうかと思いましたが、こんなからくりだとは思いませんでした。

  • 2008年02月06日(水)14:42:03
  • URL
  • 編集
みりばーる:>かおるさん

ありがとうございます。まだ試していないのですが、「contentプロパティの対応」と「フロートの親ボックスがフロートを内包してしまうバグ」、「topとbottomの同時指定」のチェックもできそうな気がします。こういうのを考えるのも面白いですよ。

  • 2008年02月17日(日)17:33:28
  • URL
  • 編集
SAB:まさに今ここの壁にブチ当たっております

なるほど、かなり興味深い内容です。
ちょっとまだ自分には難しいのでブクマさせて頂きます。
ありがとうございます!

  • 2008年06月07日(土)17:19:03
  • URL
コメントの投稿

トラックバック(-2件)

http://mb.blog7.fc2.com/tb.php/143-cb8a1979

IE6のCSSバグはIE7で修正されているのか?

XHTM関係の情報を集めている最中に、こんなページを見つけました。 てんぽ IE6のCSSバグを視覚的にチェック IE用Acidテストとも言えるCSSバグの...

  • 2008年02月18日(月)21:19:12
  • from デジタル独り相撲
「IE6のCSSバグを視覚的にチェック」に2項目追加

IE6のCSSバグを視覚的にチェックに対して、新たな項目を提案してくれた方がいたのでページを更新しました。 勝手に追加:IE6のCSSバグを視覚...

  • 2009年06月21日(日)18:56:01
  • from てんぽ

<<「FC2ブログテンプレート変数一覧」公開 | 『よつばと!』のアクセント>>

Utilities

おすすめ

セオリー・オブ・スタイルシート (Quick Master of Web Technique)
「ボックスと視覚整形モデル」の詳細な解説が圧巻。→関連記事
Web標準の教科書―XHTMLとCSSでつくる“正しい”Webサイト
正しい仕様の解説から実践的なレイアウトテクニックまで網羅。→関連記事
詳解HTML&XHTML&CSS辞典 第3版
信頼できる辞典型解説書の筆頭。

広告

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。