【特集】
CSS実装徹底検証! そこが知りたいInternet Explorer 7
2 02-01 XML宣言によって表示モードが変わる問題を修正
2006/07/13
XML宣言はXMLデータであることを示すためのもので、XML文書のエンコードの種類を示すといった役割もある。XMLをベースとしたXHTMLでページを記述したときには、ソースの1行目に記述することが推奨されている。
しかし、XML宣言のあるページをIE6で表示すると、本来はStandardモード(標準準拠モード)で表示されるべきページが、Quirksモード(下位互換モード)で表示されるという問題が発生する。下位互換モードでは標準規格と異なる解釈でページが表示されてしまうため、せっかく標準規格に従って記述しても、本末転倒ということになってしまう。この問題を回避するには、XML宣言を省略するといった形で対応するしかなかった。
IE7 beta2ではこの問題は修正され、XML宣言のあるページでも適切なモードで表示されるようになっている。
サンプルソース2-1では、1行目にXML宣言を記述し、2行目にDOCTYPE宣言を記述している。DOCTYPE宣言ではXHTML 1.0のStrictバージョンの使用を宣言しており、IEの仕様ではStandardモードで表示されることになっている。
コンテンツ部分には、widthプロパティで横幅を300ピクセルに指定した「文章A」と「文章B」の2つの段落を用意した。このうち、「文章B」の段落には、paddingプロパティで余白を、borderプロパティで罫線のスタイルを適用してある。
CSSの標準規格では、余白の大きさと罫線の太さはwidthプロパティで指定した横幅に含まないとされている。そのため、「文章B」は余白と罫線の大きさの分だけ、「文章A」よりも大きく表示されなければならない。
IEの場合、Standardモードで表示すると標準規格に従って表示される。しかし、Quirksモードで表示すると余白と罫線が横幅に含まれてしまい、横幅は変化しない。そのため、サンプルソース2-1をIE6で表示すると、「文章A」と「文章B」の横幅が同じになることから、Quirksモードで表示されていることがわかる。
一方、IE7 beta2で表示すると、「文章A」よりも「文章B」の横幅が大きくなることから、Standardモードで表示されていることがわかる。
サンプルソース2-1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>SAMPLE</title>
<style type="text/css">
body {text-align:center}
#a, #b {margin-left:auto;
margin-right:auto;
text-align:left}
#a {background-color:yellow;
width:300px}
#b {background-color:yellow;
width:300px;
padding:30px;
border: solid 30px orange}
</style>
</head>
<body>
<p id="a">文章A文章A文章A文章A文章A文章A文章A文章A文章A文章A文章A文章A文章A文章A文章A文章A文章A文章A文章A文章A文章A文章A文章A文章A文章A文章A文章A文章A文章A文章A文章A文章A文章A文章A文章A文章A文章A文章A</p>
<p id="b">文章B文章B文章B文章B文章B文章B文章B文章B文章B文章B文章B文章B文章B文章B文章B文章B文章B文章B文章B文章B文章B文章B文章B文章B文章B文章B文章B文章B文章B文章B文章B文章B文章B文章B文章B文章B文章B文章B</p>
</body>
</html>
ヘッドライン
- イーフロンティア、簡単操作の楽譜作成ツール「PrintMusic 2010」発売[19:32 2/9]サウンド
- 最短5分でオリジナルフォトブックが作成できる「PrintRush PhotoBook」[17:52 2/9]DTP
- 6月に東京ビッグサイトにて「3D&バーチャル リアリティ展」開催が決定[17:13 2/9]ビデオ
- 素材販売サイト「PIXTA」-フルハイビジョンの映像素材販売サービス開始[16:16 2/9]ビデオ
- 【レポート】曽利文彦と名越稔洋が未来の映像クリエイターに伝えたい事とは[16:00 2/9]デジタルハリウッド
- CGクリエイターが語る『アバター』の見所など-ハマクリ・イブニング開催[15:48 2/9]ビデオ
- ヒロ杉山率いるクリエイティブ集団、エンライトメントの個展「AD 2010」[15:12 2/9]Webデザイン
- WordPress開発メンバーを迎えたセミナー開催-ロクナナワークショップ[14:50 2/9]Webデザイン
- レトロなビートボックスを再現したドラムアプリ「FunkBox Drum Machine」[14:30 2/9]サウンド
- 豪華クリエイター陣が手がけたトラックを収録 -DJアプリ「Cocoon Mix」[13:59 2/9]サウンド









