2011.08.04 | 

こんにちわ
Devjamのコータローです。

先日、IEでどうしてもheightが100%にならず
ハマっていたのですが、ただ要素に100%にしただけでは
100%にならないことをすっかり忘れていたのでメモしておきます。

IEでは親要素の高さの100%という解釈なので
親要素にも100%を入れなければなりません。
ですのでページ分の高さをとるならば
htmlタグとbodyタグにheight100%を当てなければなりません。


html, body{height:100%;}

p {
    height:100%;
}

また、上記の事を調べているときに
IEでのfloat時のmargin2倍問題の解決方法も
見つけたのでメモしておきます。

IE6では float:left;とmargin-leftを同時に
指定するとmarginが、2倍になってしまいます。
逆にfloat:right;とmargin-rightを指定しても
同じく2倍になります。
今まではmarginの代わりにpaddingを指定したり
floatとは反対側のmarginで対処していたのですが
float時にはwidthも指定するので、paddingだと幅の計算が面倒だったり
デザインによっては、反対側のmarginでは対応できない場合もあります。

理由はよくわかりませんが、floatとmarginを
指定している要素にdisplay:inline;を入れると
2倍問題も解決し、モダンブラウザでは、floatしている要素の
displayの指定を無視するので問題ないようです。


p{
    float:left;
    width:80px;
    margin-left:20px;
    display:inline;
}

以上、コータローでした。