ksk.の備忘録

ブラウザ画面全体にdivをぴったり敷きたい時に横幅の指定を width: 100%; とすると有効になりますが、 高さの指定を height: 100%; としても有効にならない場合があります。 理由は高さの指定は親要素の高さに依存するからです。 解決策として html,body{ height: 100%; }   と指定するとheight: 100%; が有効になり、画面ぴったりに敷けます。 後日紹介する中央にdivを配置する方法と一緒に使用すれば画面中央にロゴを表示したりする事ができます。

W3C CSS 検証サービス CSS文書の文法をチェックします。 Another HTML-lint gateway The W3C Markup Validation Service HTML文書の文法をチェックします。

IE6で指定した背景画像が表示されないバグがあります。 スクロールバーを動かすと表示されたり消えたりする厄介なバグです。 原因はfloatプロパティを指定した要素の子要素に背景を指定すると起こる場合があります。 対処法はwidthを指定すれば回避できます。

フロートのクリア用に .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以前のみプロパティが無しになります。