普段使っているブラウザはCSSの解釈が最も正しいと評価されているMozilla系の「FireFox」です。
サイトを作る際には「FireFox」で最初に表示確認し、ある程度出来上がったら「Internet Explorer」でも確認するのですが、IEで表示くずれが発生してどう頑張っても直せないパターンが…。
左に本文、右にメニューみたいなよくある”2カラム”のレイアウトで、なおかつウィンドウの大きさによって表示枠を可変する”リキッドデザイン”のサイト作っておりました。
本文の表示ブロックに<table>を配置して、CSSでwidthを100%に指定。すると「FireFox」では正常に表示されるのに「Internet Explorer」だと本文ブロックがメニューブロックにまで食い込んでしまう！！
最小限のCSS指定でテストを繰り返すも、まったく原因が特定できませんでした。
ちなみにソース的にはこんなカンジです。
<?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>テスト</title> <style type="text/css"> <!-- body { margin: 0px; padding: 0px; width: 100%; } #contents { margin-right: 200px; } #contents table { width: 100%; background-color: #CCCCCC; } #menu { float: right; width: 200px; } --> </style> </head> <body> <div id="menu"> bb bb bb bb bb bb bb bb bb bb bb bb bb bb bb bb </div> <div id="contents"> <h1>AAAA</h1> aa aa aa aa aa aa aa aa aa aa aa aa aa aa aa aa <table summary="テストテーブル"> <tr> <th scope="col">A</th> <th scope="col">B</th> <th scope="col">C</th> </tr> <tr> <td>aa</td> <td>bb</td> <td>cc</td> </tr> </table> </div> </body> </html>
ものすごく単純ですよね…。なのに原因不明。
HTMLやらCSSのタグや設定を何度も書き換えているうちに、なんか急に正常に表示できるように！なんたる偶然！！
で、ようやく原因が特定できたのですが、悪さをしていたのはこの部分
<?xml version="1.0" encoding="utf-8"?>
工エエェェ(´д｀)ェェエエ工
XHTMLで制作する際に入れるXML宣言なんですが、いろいろ調べた結果この1行が原因で、IEの標準準拠モードと後方互換モードが切り替わってしまうようです。
最近とんと忘れてましたが、そういえばそんなのあったあったw
今までウチでよく問題にならなかったな…。
”小粋空間”さんのサイトで詳しく解説されていました。
標準準拠モードと後方互換モード・DOCTYPE宣言についてIEやMozilla 等のブラウザには、CSSに準拠してHTMLを表示するモードを「標準準拠モード」と、古い形式でマークアップされたHTMLに対応するための「後方互換モード」に対応しています。どちらのモードで表示されるかについては、以下のようなDOCTYPE 宣言（文書型宣言）に依存します。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">IE6 では DOCTYPE 宣言を1行目（先頭）に書かないと、必ず「後方互換モード」として解釈されてしまうバグが存在します。つまり1行目にXML宣言が記述されているとこのバグが発生します。
カッコ書きで「先頭」と明記しているのは、同じ行の前にXML宣言を記述しても後方互換モードとして解釈されるためです。
つまりXHTMLでサイトを作ろうと思ってXML宣言を入れたとたんに、強制的に後方互換モードになっちゃうワケです。XML宣言もDOCTYPE 宣言も先頭の1行目に入れなければならないという縛りがあり、この点で矛盾が発生してしまうのです！！
ちくしょー！ビル・ゲイツめ！！やっぱり「Internet Explorer」はバグだらけで使い物になりませんな！
回避方法を探るも決定的な策はないようです。XML宣言そのものをしないのが有効なんでしょうが、なんとも歯がゆい気持ちが拭えません。
もはやIE7も出た事だしIE6ユーザーは見捨てるか…という思いにかられましたが、念のためサイトの閲覧で使用されているブラウザのシェアをアクセス解析で確認。
7割以上IE6ユーザーでした...orz
たまたま全ページをPHPで制作するサイトでしたので、苦肉の策でユーザーエージェントがIEの場合にはXML宣言をしないスクリプトを挿入。念のため残しておきます。
<? $UA=getenv("HTTP_USER_AGENT"); if(!substr_count($UA,"MSIE")){ echo "<?xml version=\"1.0\" encoding=\"utf-8\"?>\n"; } ?>
最後に「いかにIEにバグが多いか」を確認して、これからも「FireFox」ユーザーである事を心に誓いました…。
コメント (4)
確かにIEは酷いブラウザですが、どの道IE5.5以下は互換モードなので互換対策もやって置けば良いかと。
＞ＬＩＮＵＸさん
IEハックですか？現時点では確かにそうなんですが…
IE7、IE8ではどんどんWeb標準寄りになっていくようなので、時間が解決するだろうから正直もうイイかなとw
IE5.5以下はユーザーとして捨てちゃってたんですがやっぱりダメですかね？
私は一応5.5までは考慮して、xml宣言をしてIE6も互換モードにし、必要な所だけハックを使うという現状です(5.0以下まで考えるのはさすがにきつい…)。
でもIE7になっても直ってないバグとかも多いので、正直IEにはまだまだ悩まされます＾＾；
ハック自体あまり使いたくは無いですが、互換モードまで考えると正直これなしにはちときつい部分が…。
＞ＬＩＮＵＸさん
忙殺されてコメント遅れてスミマセン…
やっぱりIEハックはした方がいいんですよね?
そういえばIE7への自動アップデートが2008年2月13日から開始ですね。
いよいよIE7がメインストリームに出てくるとなると…
正直頭がイタイです...orz