セレクタ優先度

最近全然バグのことじゃないけど。自分のおまぬけ備忘録。


<h3 class="title">タイトルよ</h3>

とかあって、あれースタイル効かないなと思ってたらこんなん
なってました。

h3 {
padding:10px 0px 5px;
margin:20px;
}

.title{
padding:0;
margin:0;
}


まぁ例が極端なのでアレですが、cssファイル内では
上二つの記述が離れていたため小一時間悩むハメに。

セレクタは上から順に読まれるので、「下にあるのが優先」です。

divで組んだtable風レイアウトのborderが（ｒｙ

divで組んだtable風レイアウトのborderが下まで伸びない時、

height:100%; とすればいいが親要素に height:200px; の
ようにサイズが入ってなければいけない。仕様。

親要素の高さが場合によって違う場合は何も指定しなければ
height:auto;　で可変になるが、以下のような場合で、

<div style="float:left;border-right: solid 1px #000;">内容１</div>
<div style="float:left;">内容２</div>
<div style="clear:left;"></div>

内容１　と　内容２　の高さがわからない場合、どちらが
高いかによって線が途中できえてしまう。
正しくはないかもしれないけど　min-height:100px;　で一応解決

<div style="min-height:100px;float:left;border-right: solid 1px #000;">内容１</div>
<div style="float:left;">内容２</div>
<div style="clear:left;"></div>

IE6でborderやpaddingの取り方が違う

ボックスの解釈がIEは間違ってるせい。
・widthの指定がなければしてみる
・各種hackを駆使してみる
・そもそも横幅一杯になる必要があるborderを使わない
・borderを背景画像にする

floatの上手な使い方

以下のようにするとき、どのタイミングでクリアするか。

<div>
<div style="float:left;">左</div>
<div style="float:right;">右</div>
<div>その下</div>
</div>

以下の形が一番問題がでづらい。

<div>
<div style="float:left;">左</div>
<div style="float:right;">右</div>
<div style="clear:both;"></div>
<div>その下</div>
</div>

floatでmarginが倍になるバグ

・これもIE6限定。アンダースコアハックを使うのが楽

margin-left:10px;
_margin-left:5px;

IE6で文字が消える

・hasLayoutのせい。*{zoom:1;}とする。
・<div style="clear:both;"></div> してると無理
・諸々調整が必要になったりインライン要素追加したりしないといけない
・IEうんこ

■参考
http://coliss.com/articles/build-websites/operation/css/143.html

IE6で背景が消える

・after擬似クラスとcntentプロパティを使う

■参考
http://blog.webcreativepark.net/2007/01/08-231453.html

IE6でborderが消える

・親要素にwidth を指定する
・borderの左右を背景画像にする