IE では問題なく表示される構成でも、非IE系ブラウザでは破綻してしまう。 そういう具体例を見ていこうと思います。
左側画像はある HTMLファイルを IE6 で閲覧したときの画像の一部分です。 １，２行で構成されるコンテンツメニューが縦に等間隔で並んでおり、表示しきれない部分はスクロールバーでカバーしています （ボックスの overflow: は auto;）。以下にメニューを収めているボックス（div）の CSS記述を掲載しておきます。
width: 26%; height: 90%; overflow: auto; margin: 0px; padding: 0px; position: absolute; top: 10%; left: 0; text-align: center
CSS の記述自体には問題は無いです。 そしてコンテンツ各個に関しては .sample0 .sample1 などのクラスを呼び出しています。 数種類ありますが、背景色と文字の色が違うというダケの違いです。
.sample0 {
border-width: 2px;
border-color: white black;
border-style: dotted double none double;
width: 90%;
margin: 6% 0px 2% 0px;
padding: 4px 0px 4px 0px;
background-color: #2f4f4f;
color: fuchsia;
font: 700 14pt/1.2 sans-serif
}
右側画像は同じ HTMLファイルを Mozilla の Firefox0.9.3 で閲覧したものです。 こいつは酷い有様だ、と、いう感じ（離れて表示されるべきモノが接触事故を起こしている） なんですが、このような破綻の原因がどこにあるかというと、 それは ”インライン要素の扱い” にあると言えます。
<span class="sample2"> <a href="index.html">トップページ</a> </span> <span class="sample1"> <a href="text.html">フォントと文字構成</a> </span> <span class="sample0"> 他ページから読みこむ </span>
実は上記のようにコンテンツメニューのテキストを <span> と </span> で囲っているだけなんですが、 このように記述したらインラインレベル要素として扱われるのが本筋です。 インラインレベル要素とは、この下線部のように行の中に組み込まれてしまうモノです。 ですから、インラインとインラインを羅列していったら、<br> もしくは行端（ボックス内の右端）まで達すると改行という 形になり、要素と要素が分離されないワケなんですよ。 だから、理詰めで考えると汚い方（下側画像）の表示例が正しいというか納得できる形だと言えます。 しかし、IE はいったいどんな方法で（間違った HTMLファイルを）整然と構築したのでしょうか？
IE では <span>...</span> のインライン要素が整然と配列されています。 その理由は以下のように推測されます。
width height margin-top margin-bottom などはブロックレベル要素の概念のハズです （左右のマージンはインラインレベル要素にも有効）。 つまり、インライン要素にこれらを指定しても無視されるのが本筋なワケです。 一方、padding border に関しては Firefox でも作用しているので、インライン要素に適合できるようです。
 | 標準準拠モード Firefox |
 | 標準準拠モード IE6 |
 | 互換モード IE6 margin:2em; width:20em; height:4em; padding:0; border:dotted; |
.highbord という一つのクラスを div と span で呼び出す（.highbord の概要はテーブル最下段の右側参照）。 同様の内容で、ブラウザと文書型宣言を変えて３パターン試してみました。 DOCTYPE が標準準拠ですと、IE でも基本に忠実な組み立てを行うようであり、インライン要素に width height margin-top margin-bottom は適用されませんでした。 しかし、互換モードですとインラインレベル要素に width 、 height 、 margin が全て適用され、spanボックスが div（ブロックレベル）と同じ寸法の長方形を形成しています。 さらには、インラインボックスのマージンが適用されて、２つのボックスの間隔が 4em になっています。 つまり、IE の互換モードだとインラインレベルとブロックレベルの区別が曖昧になり、 ある条件下においては両者が同等に扱われてしまうのです。
IE の互換モードにおけるインラインレベルの扱いの理不尽さ。
W3C の仕様書なんてロクに読んだコトがないので、これが IE のレンダリングミスなのか互換モードに内包されている作為なのかは分かりませんでした。
しかし、ウェブ上にてこのページとほぼ同様の問題を扱っているページを見つけたので、ハッキリしました。
やはり、IE のミスのようです。しかし、ミスというか半ば意図的にこのような方法を IE が採択しているように思いますね。
なぜなら、標準準拠モードでは IE でも他のブラウザと同じように組み立てられるからです。
まあ、真相は分かりませんが......。
参考；非置換インライン要素とwidth、heightプロパティ（もじら組）
ページ冒頭のグチャグチャ画像（IE ではスッキリ）のページにしても、文書型宣言が互換モードでした。 つまり、IE の互換モードでのみ通用するやり方だったわけです。 これを、より一般的で凡庸性の強いものに改める方法を考えます。
例えば、<p> と </p> で囲まれた部分は段落とみなされブロックレベル要素となります。 逆に、<span> と </span> で囲まれた部分はインラインレベル要素にすぎません。 インラインレベル要素の高さは行間（line-height:）に依存しており、 div のように height: によって定められるものでは無いというワケです。 インラインはブロックに埋もれる存在であり、主体的にポジショニング（位置決め）ができない性質を持つのです。
今度は上の段落に含まれるインライン・トピックをブロックレベルに置き換えて抽出してみます。 とりあえずリスト表示（<ul> <li>...</li> </ul>）でやってみます。 <li> には上下のマージンを 0.5em 指定してみました。
これでページ冒頭のグチャグチャレイアウトを更生させる方法が分かったも同然です。 以下に HTMLファイルの記述変更様式を記載します。
<span class="sample2"> <a href="index.html">トップページ</a> </span>
上記の記述を以下のように変更する
<p class="sample2"> <a href="index.html">トップページ</a> </p>
インラインレベル要素には width height margin が適用されない。 この事実をハッキリさせるコトにより、随分と頭の中の整理がついた気分になります。 IE しか使っていなかったときには様々な事象の境界線が曖昧になりがちで、 CSS の本質に近づくコトができなかった気がします。
CSS（カスケーディング・スタイルシート）の習得を難しくしている要因の一つに IE だと 必ずしも理論どおりには作用しない為に概念・理論の把握が余計に複雑になるというコトが考えられます。 これは、恐ろしいハナシであり IE が統一仕様から離れたところで一人歩きをしているが為に、 混乱が引き起こされているというコトです。 早いトコこの事実に気付かないと、苦労してウェブサイトを作ったものの膨大な修正を求められるハメに成りかねないのです。 IE が巻き起こした混乱は、情報の錯綜と二度手間（IE で理解した後に一般的な方法論を理解する）を生みます。 結果として無駄な時間を多くの人間に強いるコトになり大変不経済なハナシであります。
HTML の独自要素に関しては W3C や多くの現状ブラウザにおいて建前では排除しようとしていますが、 実際的には大々的な妥協が行われ黙認しているのが実状のようです。 しかし、こと CSS になるとこのような妥協は行われず、IE のやり方に帰順するブラウザは無いようです。 このような情勢を踏まえ、我々ユーザーも IE の独自仕様を容認せず、IE に服従しない姿勢を打ち出しましょう。
なお、このページに記載した内容だけが IE 独自の特性というワケではありません。 結果的に４種類に大別（本章の内容も含む）するコトになりましたので、 他の IE 独自の特性についても一読してください。