Firefox CSSの浮動小数点のバグ？

Question

更新 私は新しいイメージで更新することはできましたが、キャッシュの問題ではないことを強調しましたが、常に「次へ」ではなく「下に」現れました。 "...私は理解していない...しかし突然それは今働いた。

SafariとChromeでwww.dodomainer.comをチェックすると、ヘッダーの2つの画像がFirefoxに表示されますが、Firefoxでは表示されません。どのようにこれを修正するための任意のアイデア？ Firefoxのキャッシュの結果としてこの方法は間違いではないことに注意してください。

これは私が使用するコードです。どのように問題を解決するか？

<div class="header a"><a href="http://dodomainer.com/"> 
<img src="http://dodomainer.com/images/dodo4.jpg" width="400" height="50" padding-left="10px" alt="dodobird" /> 
</a></div> 

<div class="header b"> 
<a href="http://dodomainer.com/"> 
<img src="http://dodomainer.com/images/dodotest.jpg" width="380" height="70" padding-left="10px" alt="dodobird" /> 
</a> 
</div> 

CSS

.header { 
    float: left; 
    width: 400px; 
} 

.a { 
    height: 50px; 
} 

.b { 
    height: 70px; 
    padding-left: 100px; 
} 

Answer 1

ここで固定することは問題ありません。

あなたのコードはすべてのブラウザで動作するはずです。私はIE、FF、Opera（すべて最新だが）でチェックした。すべての良い。

float：leftの子divが2つだけあります。

Answer 2

マイケル、パッディングに関して、ここでオーバーフローの問題が発生している可能性があります。さまざまな方法でブラウザがボックスモデルを計算します。ヘッダーAの幅は400ですが、画像は400 +パディング内にあります。パディングを削除するか、実際にコンテナを格納するためにコンテナのサイズを変更します。他のオプションは、オーバーフローを隠しに設定することです

Answer 3

これは私のFFや他のブラウザでうまく見えます。

しかし、あなたはあなたの問題を引き起こしている可能性があり

.b { 
    height: 70px; 
    padding-left: 100px; 
} 

でpaddingを軽減することができます。

EDIT：

元の問題が原因でpadding-left:10px;で消えてしまったかもしれimgにinlineを追加しました。それが削除された場合、may問題が再び発生する可能性があります。