IE 特有の独自拡張を一切使わずとも、ブラウザ特有のクセに振り回されます。 本章では CSS で良く使われる position 、 overflow プロパティについて、さらにはその周辺事項について説明します。
タテヨコ共に 100px のボックスを用意しました。
width と height で数値を指定しています。
そしてそのボックスの中に赤色の文字を入れています。
左側が IE6、右側が Mozilla の Firefox で閲覧したものです。
文字の大きさは 12pt に設定していますので同じ大きさですが、デフォルトの改行処理と行間が若干違うようです。
まあ、そんな細かいコトは置いといて見るからに外観が違いますわな。
FireFox では height:100px の指定を忠実に守っています。
ボックスに収まりきらない文字は当然のごとくボックス外にハミ出しています。
素直に考えればこのやり方が正しいようにも思えますが、
IE では全く違う処理を施します。
文字がボックスに収まる場合は height:100px の指定を守りますが、
ボックスに文字が入りきらない場合、ボックスが文字の占有面積に合わせて拡大します。
拡大する際、横幅は守られますが縦幅の指定は完全に無視されます。
図を見てもらえば分かると思いますが、右側のようになってしまうと外観が悪くなります。 あきらかに失敗しているようなダメな雰囲気を醸し出しているワケです。 対策としてはですね、どうせ IE でも高さ指定が無視される定めなんですから、height による高さの指定をやめてしまうコトです。
同じファイルを別々のブラウザで開きました。
No.1 が Firefox 0.9.3、 No.2 が IE6 で見た画面です。
説明の為にキャプチャー画像中に赤とピンクで書き込みをしていますが、見れば分かりますわな。
タテヨコの幅を指定しても、 IE では高さが文字量次第なところがあるとは前述した通りですが、
今回は高さの乱れが他のボックスにも影響を与えてしまうというハナシです。
overflow:visible とはデフォルトと同じなんですが、例によって IE ではボックスの縦幅が伸びています。
文字量の関係で 75px ボックスの高さが伸びているのですが、この 75px が右横のボックスの配置位置を乱しています。
左右のボックスは上端で高さがそろって、
左右が平行に並ぶように指定を行っています。
position:relative; で left:180px; top:-100px; に設定しています。
簡単な説明をすると、position:relative; だと（HTMLファイル内で）直前に記述したボックスの真下に
次のボックスが配置されます。
left:180px; top:-100px; の指定を行わないと大きい方のボックスは No.3 のような位置に置かれるわけです。
それで、この位置から左端を 180px 押してやり右側に移動させます（left:180px;）。
次に上に引っ張ってやりたいのですが、引き上げるときはマイナスの値を指定します（top:-100px;）。
なぜ、100px 上方向に引き上げるのかというと小さい方のボックスがタテヨコ 100px に指定しているからです。
Firefox で閲覧した場合（ No.1 ）は計算どおりにレイアウトが行われ、左右のボックスが綺麗に並んで表示されました。 しかし、IE の場合（ No.2 ）は小さい方のボックス（タテヨコを 100px に指定）の高さが文字量に合わせて 175px に伸びてしまった為、 ポジション決定における計算が合わなくなったのです。
このようにボックス内に文字を収める場合、オーバーフローで visible 以外の値を取ってやらないと大変なコトになります。
オーバーフローに関しては
オーバーフロー解説を参照してください。
さて、全く同じ（標準準拠の）プロパティや値を用いてもブラウザによって、解釈のされかたが違うというコトが分かったかと思います。 ウェブサイトのレイアウトにおいて文字というヤツの扱いは難しく、長文テキストを複雑なレイアウトでコントロールするのは至難の技です。 最も、IE ではフォントサイズを絶対指定にするとユーザーが容易には変えられないので、多少は文字のコントロールがしやすいのですが......。 しかし、サイズ絶対指定文字でレイアウトバランスを保持しようとするサイトは IE以外のブラウザを使うユーザーによって簡単に崩されます。 とにかく、テキストの存在はウェブデザインにとって鬼門であり、実は最も扱いが難しいものだと心得ておいた方がよろしいでしょう。
IE の最大の特徴の一つはボックスの大きさを文字の量次第で変化させる機構を持っており、
特に計算を行わないで（数字的には）矛盾だらけの HTML を作ってもそれなりに表示されるというところにあります。
例えば先ほど紹介した No.3 の画像を Firefox で開くとこのようにグチャグチャになります。
総じて感じるのは IE以外のブラウザを使ってみると、ウェブの作成が実は異常に難しいという事実です。
少しでも曖昧な理解をしていると、Mozilla などでは徹底的にやられます。
IE は確かに便利ですし高性能のブラウザだとは思いますが、こればかり使っていると本当の HTML というものが見えなくなってくるのも確かなコト。
何だか MicroSoft が意図的に仕組んだ愚民政策にハメられているような気がして頭にきますよ。
テキストという不確定要素によってウェブのレイアウトが崩されるという事実を踏まえ、
IE ユーザーのウェブマスターはフォントサイズの固定（サイズの絶対指定）をしてこの問題を回避しようとします。
しかし、あらゆるブラウザで対応できる方法で問題の解決を考えてみたいと思います。
一つ考えられるのはボックスの位置や大きさを指定する単位に em を使うコトです。
1em とは全角文字一文字分の長さを意味する単位です。
フォントを monospace （等幅文字）に指定して、line-height: （行の高さ）を 1; に、
font-size:12pt; width:10em; height;3em; overflow:hidden; と指定したボックスに文字を入れたのがこの画像です。
横に全角文字10文字（半角文字20文字）、縦に3文字分がキッチリと収まっています。
ただ、気を付けないといけないのは、どこで指定したフォントサイズを参考にするかというコトです。 上の例では #SECOND という id の中で横幅・縦幅と共にフォントサイズも含めた指定を行っているので、 font-size:12pt; を基準として em の算出を行なっています。 もし、フォントサイズの指定が無ければ親要素からの継承となりますのでその点はキッチリと整理しておいてください。
さて、せっかくの em によるタテヨコ幅の指定ですが、12pt のように絶対指定をするとどうでしょうか。
Mozilla の Firefox で試したところ、ブラウザの機能で表示サイズを変更したときに（絶対指定文字も拡大・縮小するのですが）
em の基準サイズも変更してくれるようなので問題ありませんでした。
ただし、どんなブラウザでもフォントのサイズによっては（割り算で端数が出る為）計算どおりに収まってくれなくなります。
縮小版の画像で文字が欠けているのはこのためです。
これを避けるためにボックス内に、多少のパディング（padding:0.2em など）を作り、若干の余裕を持たせるコトをお奨めします。
HTMLファイルの冒頭一行目に
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
と記すと文書型宣言となります。 こう宣言すると現状で流通しているブラウザ（Mac版IE5、Mozilla/Netscape6/7、Windows版IE6、Opera7 等） において互換モードになるらしいです。 また、IE5.5 以前ではモードの切り替え機能が無いので自動的に互換モードになります。 互換モードは ”従来方式” とでも言うべく、古いブラウザと同じ方法論を用いるモードです。
当サイトでは文書型宣言で標準準拠モードを選んでいます。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
一方、宣言すると標準準拠モードになります。 Mozilla の Firefox ではレンダリングモードの自動切換え機能があり、 FullStandard（Strict / 標準） | AlmostStandard（Transitional / 互換） | Quirks（文書型宣言無し）の３種に区分されます。 ただし、IE6 の標準/互換とは違っており、互換モードでも標準準拠モードと同様の組み立てを行います。 Firefox で DOCTYPE が Transitional（互換）の場合、Strict（標準）との違いは table内画像の扱い方だけのようです。
Mozilla（Firefox を含む）では、SGML の DOCTYPE宣言によってレンダリング・モードが切り替わるらしいのですが、 よくわかりません。 一つだけ断言できるのは Strict（標準）にしたとき、6.0以降の IE と 非IEブラウザ間における 整合性が高くなるというコトです。
どちらのモードであるかによって、HTML・CSS の組み立て方（レンダリング）が変化します。
標準準拠モードを宣言すると、古いブラウザでは対応していないものが多いので、
IE5.5 と IE6 とでは違った見え方になる可能性がでてきます。
互換モードを宣言すると、IE と非IEブラウザでは異なった解釈を行う為、見え方が変わってしまうでしょう。
仮に標準準拠モードを 10点とします。
IE における Transitional は 3点、非IEブラウザ（古いモノは除外）における Transitional は 9点、
という感じです。
点数が近いほどレンダリング方法が似ていると考えてください。
つまり、Firefox における Transitional の解釈と IE6 における Transitional の解釈は全くの別物です。
互換モードが新旧のブラウザ間における互換性を高めるのに対し、
標準準拠モード（Strict）では W3C の標準仕様に準拠しますので異なるブラウザ間の互換性を高めます。
例えばフォントサイズを medium で指定しているページがあるとします。
標準モードですと相対的に同じ大きさで表示されますが、互換モードだと違う大きさの文字になります。
IE では標準・互換のモードにおいてフォントサイズの取り方が違うからです。
参考；ダブルブラウザで見えてくる真実
次に、パディング（padding）の扱いですが、これも計算の仕方が異なります。
互換モードですと width と height で作られた内側に余白と枠線（border）を作りますが、
標準準拠モードだと外側にこれらを作ります。
padding:1em; border:solid black 1em; としているので標準準拠モードの方は実質
「19em * 10em」 の大きさになるわけです。
このように標準準拠モードだとパディングと枠線を加えた面積がボックスの支配領域になります。 先例だとパディングと枠線が無しで「19em * 10em 」の大きさを持つボックスと同等の扱いになります。 これによって、他のブロックレベル要素の位置関係なども変わってくるでしょう。 他にも（IE における）モードの違いによる差異はありますが、例えばブロック要素のセンタリングシステムについて異なる部分があります。
参考；ブロックレベル要素をセンタリングする方法（もじら組）
参考；文書型宣言とブラウザでの表示（訪優Web作り）