CSSの履歴

履歴一覧

間違いやすい属性

display: (none|inline|block|...) ボックス領域も消える
visibility: (visible|hidden|collapse) ボックス領域は消えない

floatしたボックスのカラムの高さを揃える

http://css.studiomohawk.com/26/columns-height-equal-with-css...

揃えたいボックス
padding-bottom: 30000px;
margin-bottom: -30000px;

その親のボックス
overflow:hidden;

float段組みがうまくいかない場合にとる方法

  • ネガティブマージン

maringにマイナスの値を指定すると重なってボックスが落ちたりしなくなるよ。

値を指定しているのに、なぜか設定されていない

文法ミスってない？

スペルミス、;忘れ、''閉じ忘れ等はよくあることです

セレクタには優先度というのがあってだな…

どう考えても値指定してるし、順序的に後に記述してあってたとしても、

「より詳細にセレクタを記述した方が優先度が高い」

というルールがある。例えば"li"よりも"ul li"の方が優先度が高い。また、id > class > elementの順で優先度が高い。
それでもうまくいかない場合、いざとなれば!importantという手もある。

floatした時、背景が/ボーダーが出ない

/* 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/winie/b001.html
本来ボックスの幅は(width + padding + border)になる。でもIE6はpaddingとborderをwidthに含めてしまう。
→これは標準準拠モードにすれば対応してるらしい

  • マージンがおかしい。

http://cssbug.at.infoseek.co.jp/detail/winie/b107.html
ダブルマージン問題。左フロートの左marginは0にする。右フロートの右marginは0にする。

ボックスの高さを揃える

方法１

.parent{
  overflow:hidden;
}
.box{
  margin-bottom: -9999px;
  padding-bottom: 9999px;
}

でもこれだと#をつけたフラグメントにアクセスした時、表示がおかしくなる（firefox, IE）。そういうのを使わないのであれば使えるかも。

方法２

背景色使って揃ったように見せかける。