間違いやすい属性
display: (none|inline|block|...) ボックス領域も消える
visibility: (visible|hidden|collapse) ボックス領域は消えない
floatしたボックスのカラムの高さを揃える
http://css.studiomohawk.com/26/columns-hei...
揃えたいボックス
padding-bottom: 30000px;
margin-bottom: -30000px;
その親のボックス
overflow:hidden;
float段組みがうまくいかない場合にとる方法
・ネガティブマージン
maringにマイナスの値を指定すると重なってボックスが落ちたりしなくなるよ。
値を指定しているのに、なぜか設定されていない
文法ミスってない?
スペルミス、;忘れ、''閉じ忘れ等はよくあることです
セレクタには優先度というのがあってだな…
どう考えても値指定してるし、順序的に後に記述してあってたとしても、
「より詳細にセレクタを記述した方が優先度が高い」
というルールがある。例えば"li"よりも"ul li"の方が優先度が高い。また、id > class > elementの順で優先度が高い。
それでもうまくいかない場合、いざとなれば!importantという手もある。
floatした時、背景が/ボーダーが出ない
・clearfixを使いましょう。
/* clearfix */
.clearfix{
zoom:1;/*for IE 5.5-7*/
}
.clearfix:after{/*for modern browser*/
content:".";
display: block;
height:0px;
clear:both;
visibility:hidden;
}
* html .clearfix{
display:inline-table;
/*\*/display:block;/**/
}
IEがおかしい
http://mb.blog7.fc2.com/blog-entry-83.html
・ ボックスの幅がおかしい
http://cssbug.at.infoseek.co.jp/detail/win...
本来ボックスの幅は(width + padding + border)になる。でもIE6はpaddingとborderをwidthに含めてしまう。
→これは標準準拠モードにすれば対応してるらしい
・ マージンがおかしい。
http://cssbug.at.infoseek.co.jp/detail/win...
ダブルマージン問題。左フロートの左marginは0にする。右フロートの右marginは0にする。
・ brが効かない
letter-spacingを付けるとダメらしい。brを0にするとOK
br{
letter-spacing: 0px;
}
CSSバグ辞典なくなってる…?
ボックスの高さを揃える
方法1
.parent{
overflow:hidden;
}
.box{
margin-bottom: -9999px;
padding-bottom: 9999px;
}
でもこれだと#をつけたフラグメントにアクセスした時、表示がおかしくなる(firefox, IE)。そういうのを使わないのであれば使えるかも。
方法2
背景色使って揃ったように見せかける。