【特集】
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>
ヘッドライン
- iPhoneを振ってドラム演奏 -楽器アプリ「モーションドラム」最新版登場[00:00 3/21]サウンド
- クリエイター150組がマーケットに参加! 「OZONEクラフトマーケット2010」[14:00 3/20]Webデザイン
- iPod nanoで水中撮影!? 完全防水ケース「Capture Waterproof case」[11:00 3/20]Webデザイン
- 【注目記事まとめ読み】今週のクリエイティブトピック-3月13日から3月19日[00:00 3/20]
- iPhoneで本格的なDJプレイを可能にする音楽アプリ「Cue Play DJ」発売[20:19 3/19]サウンド
- 【コラム】クリエイティブ初心者のためのFlash講座 第20回 ActionScriptを活用しデジタル時計を作成(その5) -htmlテキストを作る[19:27 3/19]Adobe
- データクラフト、「デザインポケット」にて欧文書体のダウンロード販売開始[17:16 3/19]DTP
- ドローソフトの操作性を融合したグラフ制作ソフト「OmniGraphSketcher」[16:37 3/19]DTP
- 「STUSSY」と交友のある写真家10名の写真展開催-RING CUBEにて[16:15 3/19]Webデザイン
- iPhoneや携帯サイトに対応-サイト制作ソフト「BiND for WebLiFE* 3.5」[15:43 3/19]Webデザイン










