のIEではマージン相殺が効かない場合があった。
IE7以前の話。

IE7以前(IE6、IE7)では、「hasLayout:true;」だとマージン相殺が効かなかった。
「hasLayout」については別途記載したのでそちらを参照ということで、
これを回避する方法のお話。

CSSハックを使う。
┌──────────────────────────────────────┐
│div {                                                                       │
│    margin-bottom   : 1em;                                                  │
│    *margin-bottom  : 0;    /* IE7以下に適用 */                             │
│}                                                                           │
└──────────────────────────────────────┘
頭に「*」をつければ、IE7以下のみに適用されるプロパティとなるので、
これを上書してあげる形とする。

IE8以降では廃止となったが、
IE6、IE7において「hasLayout」という読取専用プロパティがあった。

既定は「false」で、CSSで以下のいずれかを指定した場合に「true」になるという
代物であった(直接の指定はできない)。
  「display:inline-block;」、「position:absolute;」、
  「float:left;」、「float:right;」、
  「height:■;」、「width:■;」、「zoom:■;」(拡大率(IE独自規格))、
  「writing-mode:tb-rl;」(縦書(IE独自規格))

で、「hasLayout:false;」の時に、
IE6で表示がおかしくなってしまうことがあったそうだ。
(IE7でズームをおこなっても同じ)

なので、敢えて「zoom:1;」とか無害なプロパティを定義して
「hasLayout:true;」にしていたらしい。

CSSを特定のブラウザだけに有効にさせる記法を「CSSハック」という。

【IE6】
  先頭に「_」をつける
  ┌─┬──────────────────────────────────┐
  │例│_color  :#FFFFFF;                                                   │
  └─┴──────────────────────────────────┘

【IE7以下】
  先頭に「*」をつける
  ┌─┬──────────────────────────────────┐
  │例│*color  :#FFFFFF;                                                   │
  └─┴──────────────────────────────────┘

【IE8以下】
  末尾に「\9」をつける
  ┌─┬──────────────────────────────────┐
  │例│color   :#FFFFFF\9;                                                 │
  └─┴──────────────────────────────────┘

マージン(margin)が隣接していると、長い方が採用され、短い方が無視される。
「マージン相殺」である。

「マージン相殺」は垂直方向(縦方向)でのみ起こり、
水平方向(横方向)では起きない。

以下の二つの種類がある。(以下の図は便宜上90度回転している(本来は縦向き))
┌─────────┬──────────────┐
│                  │┌─────┐  ┌────┐│
│                  ││├→      │  │├→    ││
│(隣接)マージン相殺││          │⇒│        ││
│                  ││    ←─┤│  │ ←─┤ ││
│                *1│└─────┘  └────┘│
├─────────┼──────────────┤
│                  │┌─────┐  ┌────┐│
│                  ││├→      │  │├→    ││
│入れ子マージン相殺││          │⇒│        ││
│                  ││   ├─→ │  │├─→  ││
│                *2│└─────┘  └────┘│
└─────────┴──────────────┘
  *1：float同士の場合は相殺が起こらない
  *2：float同士の場合は相殺が起こらない
      また、親要素に「padding」「border」 が含まれているか
      「overflow:hidden」、「overflow:scroll」か
      「position:absolute」、「position:fixed」かの場合にも
      相殺が起こらない

例えば、以下のような入れ子の場合…
┌──────────────────────────────────────┐
│div#外側 {                                                                  │
│    height              :4em;                                               │
│    width               :4em;                                               │
│}                                                                           │
│div#内側 {                                                                  │
│    height              :2em;                                               │
│    width               :2em;                                               │
│    margin              :1em;                                               │
│}                                                                           │
└──────────────────────────────────────┘
以下のようなイメージになる。
┌──────────────────────────────────────┐
│                                                                            │
│┌─┬─┬─┐                                                              │
││  │  │  │                                                              │
││  └─┘  │                                                              │
││          │                                                              │
│└─────┘                                                              │
└──────────────────────────────────────┘
縦方向は外側「margin:0;」と内側「margin:1em;」が操作されて
「margin:1em;」となる(外側から見た場合「相殺」とイメージではないが相殺だ)。
内側は外側が「margin:0;」のまま、内側が「margin:1em;」のままなので
センタリングされたような形になる。

縦方向には「margin:0;」と同じになる。

横方向の場合は、「margin:残り100%;」と同じになる。
よって、左右両方に「margin:auto;」があると、「margin:残り50%;」と同じになる。

なので、「margin:auto;」は縦方向(上)に対しては「0」で
横方向(左右)に対してはセンタリングした形となる。

また、「float」の場合には、横方向に対しても「margin:0;」となる。

画面の横幅を超える文字が「fieldset」タグ中にあった場合、
IEとそれ以外では挙動が異なる。

IE以外の場合、「fieldset」全体が拡張し、画面全体が横スクロールとなる。
┌──────────────────────────────────────┐
│  ┌タイトル────────────────────────────────│
│  │あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもや│
│  └────────────────────────────────────│
├─┬──┬───────────────────────────────┬─┤
│←│    │                                                              │→│
└─┴──┴───────────────────────────────┴─┘

IEの場合、「fieldset」は拡張せず、文字がはみだし、画面全体が横スクロールとなる。
┌──────────────────────────────────────┐
│  ┌タイトル──────────────────────────────┐  │
│  │あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもや│
│  └──────────────────────────────────┘  │
├─┬──┬───────────────────────────────┬─┤
│←│    │                                                              │→│
└─┴──┴───────────────────────────────┴─┘
ちなみに、「fieldset」の横幅をJavaScriptで調べたら、小さいままだった。

対策としては、「fieldset」自体にスクロールバーを実装してしまうというのがある。
┌──────────────────────────────────────┐
│fieldset {                                                                  │
│    overflow    :auto;                                                      │
│}                                                                           │
└──────────────────────────────────────┘
IEの場合のみ、「fieldset」が横スクロールとなる。
┌──────────────────────────────────────┐
│  ┌タイトル──────────────────────────────┐  │
│  │あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめ│  │
│  ├─┬──┬───────────────────────────┬─┤  │
│  │←│    │                                                      │→│  │
│  └─┴──┴───────────────────────────┴─┘  │
└──────────────────────────────────────┘
IE以外の場合は、「fieldset」が拡張して(「fieldset」内の)オーバーフローが
発生しないので、これまで通り画面全体が横スクロールとなる。

IE8以前の場合、fieldsetの背景色が枠線をはみ出るというバグがあった。

若干見栄えが悪いだけで致命的な問題ではないので、
時が過ぎる(新型IEが主流になる)のを待つのが賢明かと思われるが
そうも言っていられない場合の悪あがき方法。

以下のように、legendタグをabsoluteにして浮かせた形にしてしまう。
┌──────────────────────────────────────┐
│fieldset {                                                                  │
│    position            :relative;                                          │
│    padding-top         :0.75em;                                            │
│    margin-top          :0.5em;                                             │
│    background-color    :#CCCCCC;                                           │
│}                                                                           │
│legend {                                                                    │
│    position            :absolute;                                          │
│    top                 :-0.5em;                                            │
│    left                :0.5em;                                             │
│    background-color    :#FFFFFF;                                           │
│}                                                                           │
└──────────────────────────────────────┘

任意の場所で改頁したい場合には、「page-break-before:always;」属性を
つけてあげればよい。
┌──────────────────────────────────────┐
│<style type="text/css" media="print">                                       │
│div.break {                                                                 │
│    page-break-before   :always;                                            │
│}                                                                           │
│</style>                                                                    │
└──────────────────────────────────────┘

単純な方法としては、改頁専用のdivタグとしてしまって、
そのdivタグを任意の場所に置くという方法か。
┌──────────────────────────────────────┐
│<div class="break"></div>                                                   │
└──────────────────────────────────────┘

CSSに「media="print"」を指定すると、印刷時用の専用レイアウトとなる。
┌──────────────────────────────────────┐
│<style type="text/css" media="all">                                         │
│</style>                                                                    │
├──────────────────────────────────────┤
│<style type="text/css" media="screen">                                      │
│</style>                                                                    │
├──────────────────────────────────────┤
│<style type="text/css" media="print">                                       │
│div.xyz {                                                                   │
│    display             :none;                                              │
│}                                                                           │
│</style>                                                                    │
└──────────────────────────────────────┘
上記のように「media="all"」とは別に「media="print"」を設ける形となる。
「media="all"」は共通向けCSSで、画面表示と印刷出力の両方に影響がある。
なお、「media="screen"」にすれば、画面表示専用となる。

画面表示上必要な、「xyz」領域を印字時に除外する例が上記となる。
「xyz」領域は他になんでもOKで、よく使うものとしては
「印刷ボタン」があるのではないだろうか。

「印刷ボタン」は画面に必要だが、印字には必要ないから、これを「display:none;」に
してしまえばよい。

なお、media属性の指定をしない場合の既定は「media="all"」であり、
「media="screen"」か「media="print"」の一方のみを指定して場合には
他方は定義なしと見なされ、HTML既定のレイアウトが適用される。

「positon:absolute;」により絶対位置でオブジェクトを配置する場合、
それを乗っけるお盆みたいな存在が必要だ。
その役割をするのが、「positon:relative;」の親オブジェクトとなる。
(厳密には「positon:fixed;」とかでもいいけど)
┌──────────────────────────────────────┐
│<div style="positon:relative;">                                             │
│  <div style="positon:absolute;">■</div>                                   │
│</div>                                                                      │
└──────────────────────────────────────┘
ま、こんな感じで「positon:absolute;」を
「positon:relative;」中に内包させればよい。

じゃ、divタグじゃなくてtdタグでも…ってことで、以下のようにやりがちだ。
┌──────────────────────────────────────┐
│<table><tr><td style="positon:relative;">                                   │
│  <div style="positon:absolute;">■</div>                                   │
│</td></tr></table>                                                          │
└──────────────────────────────────────┘
不思議なことにFirefoxだけおかしく表示される。

Firefoxのバグ？いやいやこれが正式、W3Cのルールなのだ。
(他ブラウザは見逃しているが、Firefoxは忠実なのだ)

つまり、table系タグには「positon:relative;」は効かない！のだ。

ということで、回避策はdivタグを一個余分に噛ませてやればよい。
┌──────────────────────────────────────┐
│<table><tr><td><div style="positon:relative;">                              │
│  <div style="positon:absolute;">■</div>                                   │
│</div></td></tr></table>                                                    │
└──────────────────────────────────────┘

こういうルールにぶち当たると、tableタグによる(不要な)段組みはやめようかなと
思えてくるのだろう。