マイコミジャーナル

知りたい!を刺激する総合専門サイト


  1. クリエイティブ

  2. 特集
  3. CSS実装徹底検証! そこが知りたいInternet Explorer 7

【特集】

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-1:IE6での表示

図2-1-2:IE7 beta2での表示

サンプルソース2-1

<?xml version="1.0" encoding="UTF-8"?>
<!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>

画像で見るニュース(クリエイティブ)

特別企画

注目情報


特設サイトの必見情報



注目サイト