Archives for posts tagged ‘CSS’

今更ながらにFireFoxのマージンの相殺について

知ってはいたけど真剣に悩んだことがなくて、いつも結果オーライでいってました。。。
…が、また今日お仕事でコーディングしていてぶち当たったのでちゃんと解決法を考えてみました。
まあ、皆さん知ってると思うのでほぼ自分用のメモです(笑)
 
Firefoxのマージンの相殺はmargin-topを使ったときの挙動ですね。
たとえば、

#div1{
 margin-top: 20px;
}
#div2{
 margin-top: 20px;
}

 
こういったCSSがあってdiv1はdiv2の親のdivだとします。
こうした時に、「div2のmargin-topが適用されない」といった現象でたとえ、ブロック要素を入れようがheightを入れようが変わらないんだぞ!…俺!
 
んで、まあ調べたネットなどでいろいろ見た結果解決策はこれ
 

#div1{
 margin-top: 20px;
}
#div2{
 margin-top: 20px;
width:100%;
float:left;
}

 
floatとwidthを設定する!
 
これ覚えておくように!…俺!
 
別にコーディング知識をこれ以上深めようとは思ってませんが、実作業で困らない程度には知っておきたいってことです。
これ以上のことはCSSやFirefoxの仕様をネットで調べればいろいろでてきますよ^^
まあ、これでもまた詰まってしまって調べたりしたらまた追記していきます。

FireFoxとIEのliタグの違い

ちょっと作業が落ち着いたのでメモも兼ねてカキカキ。
最近よく、コーディングが引っかかるのがli要素のlist-style。
自前の画像をアイコンに使おうとするとだいたい良くないことが起こる。
IEもしくはFireFoxのどちらかに合わせるとどちらかがずれる。例えばFireFoxに合わせるとIEでは文字とかぶっているとか、IEに合わせるとFireFox側ではいなくなるとか。
li要素のpositionの解釈も違うみたいだし・・・。marginとpaddingの相殺とかも関係あるのか?
まあ厳密には突き詰めてはないんですけどね。
ひとまずいろいろ調べたり試したりしてわかった事は、単純に背景画像を使用すること。
たしかに、これなら解釈の違いはほぼないので確実だ。これからこれでやる癖をつけよう。

Get Adobe Flash playerPlugin by wpburn.com wordpress themes

Bad Behavior has blocked 22 access attempts in the last 7 days.