ksk.の備忘録

フロートのクリア用に .clearBox{ both: clear; width: 1px; height: 1px; } のような要素を用意しても、IE5.5/6では高さが1pxになりません。 その場合IE6では”overflow: hidden;” IE5.5では”font-size:0;”と”overflow: hidden;”を追加すると回避できます。 例： .clearBox　{ both: clear; width: 1px; height: 1px; overflow: hidden; font-size: 0px; }

.boxLeft { float: left; width: 200px; margin-left: 30px; } IE6ではこの場合フロートした要素のマージンが2倍になってしまいます。 display:inline;を加えるとバグを回避できます。 例： .boxLeft { float: left; width: 200px; margin-left: 30px; display: inline; }

Tantek Box Model Hackと言うらしいです。 IE5.5以前とそれ以外のブラウザで違うプロパティを指定したいときに使えます。 セレクタ { プロパティ: 値; /* Tantek Box Model Hack Start */ voice-family: "\"}\""; voice-family: inherit; /* Tantek Box Model Hack End */ プロパティ: 値; } 例： #mainTopInfolist li { height: 40px; /* Tantek Box Model Hack Start */ voice-family: "\"}\""; voice-family: inherit; /* Tantek Box Model Hack End */ height: 30px; } IE5.5以前はheightが40px それ以外のブラウザではheightが30px IE5.5以前のpadding、borderを含めた数値がheight、widthになるバグを回避する時に使えます。 もちろんですが、height: 40px;を指定しなければIE5.5以前のみプロパティが無しになります。