■IEとFirefoxでのpaddingの違い////////////////////
hoge {
width:100px;
padding: 10px;
}
IEの場合→横幅は100pxとして認識しされる
Firefoxの場合→横幅は120px(左padding＋右padding)として認識される
対策はpaddingを使わずmarginを使う or padding分をwidth,heightから引く
divを2重にし外側でwidthを指定し、内側でpaddingを指定する
■floatによる浮き上がり////////////////////
<div id="container">
<div class="leftBox">内容</div>
<div class="rightBox">内容</div>
</div>
#container {
color: #000000;
background-color: #cccccc;
border: 2px solid #333333;
padding-top: 20px;
padding-bottom: 20px;
overflow: hidden;
}
#container:after {
content: "";
display: block;
clear: both;
height: 1px;
overflow: hidden;
}
.leftBox {
width: 45%;
float: left;
border: 2px solid #000000;
}
.rightBox {
width: 45%;
float: right;
border: 2px solid #000000;
}
floatはボックスを"浮かせる"ので、内側のボックスが全部浮かんでしまった場合、外側のボックスの高さはなくなり色も抜けてしまう。
:afterにcontentを指定すると、ボックスの中の一番最後に新たなテキストや画像を挿入し外側のボックスが拡張されるようになる。clearfixの方法はたくさんあり他のやり方もチェック。
■Height100%のテーブル////////////////////
Height:100%の可変長テーブルをあきらめた
→IEとFirefoxで挙動が違うので一つのcssで制御するのが面倒だったから
→CSSを切り替えるできると思う
(理由)
高さ100%のテーブルは親要素も全てHeight:100%にする必要がある
タイトル高などhtml100%から高さを引きたいが上手く引けない
IEではブラウザサイズに対して100%となるので、ナビコンテンツが長い場合はコンテナ背景色が消える
Firefoxではコンテンツ高さに対して100%となるので、ナビコンテンツのコンテナ背景色が消える