margin-topで起きるFIREFOXのバグ - cording|コーディングウォーカーcording walker
WEB標準をわりと正確に読む人気のブラウザとして、FIREFOXがある。 （グーグルクロムが出てからはそっちに人気が移動しそうだけど） コーディングする際、まずはFOREFOXで確認しながらコーディングしていき、 最後にIEなどで確認をしたり、CSSハックを行ったりして、 調整する流れで作っている。 そんな信頼のFIREFOXもバグがないわけではない。 一番頻繁に遭遇するのが、入れ子（ネスト）構造になっている場合の子供にあたる<DIV>につけたmargin-topのバグだと思う。 <div id="box1"> <div style="margin-top:20px;"> あいうえーお </div> </div> こんな風にbox1というdivの中にmargin-top:20pxをつけたdivを作る。 本来ならば、box1の中で、20pxの余白ができたあとに、中のdivの内容が表示されるは
[CSS]IE6でよく遭遇する6つのバグとその解決方法 | コリス
CSS Trickのエントリーから、IE6でよく遭遇する6つのバグとその解決方法の紹介です。 IE CSS Bugs That’ll Get You Every Time ボックスモデルのバグ マージンが二倍になってしまうバグ min-width, min-heihgtと同等の指定 Stepdownバグ hover擬似クラスをa要素以外にも対応 透過PNGを透過表示に対応 ボックスモデルのバグ <textarea name="code" class="css" cols="60" rows="5"> div#box{ width:100px; border:2px solid black; padding:10px; } </textarea>
特に気をつけたいIE6のバグ
未だある程度のシェアを誇るIE6の有名なバグです。 Seesaaのブログをカスタマイズする上で、カラム落ちなど、大きくレイアウトが崩れる原因は、この２つだと思います。この２つを覚えておくだけでも、かなり違うと思います。 1）floatを指定した場合にmarginが２倍になる このバグは、floatと左右marginの特定の組み合わせで発生します。 下の例は、3つのボックスにfloat:leftを指定し、左右に10pxのmarginを指定しています。 この場合、左floatの一番左のボックスの左marginが2倍になります。 同様に、右floatの一番右のボックスの右marginも2倍になります。 全体の幅に余裕がある場合、問題ありませんが、きっちり合わせた場合、押し出されてカラム落ちになります。 （対策）marginが必要な場合、バグの発生しているボックスに、display:inline;
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
sakurachiro.com
