Firefox CSS浮动bug？

Question

更新 它似乎已经神奇地纠正了，因为它现在有效，但我强调它不是缓存问题，因为即使我能够用新图像更新但它们总是出现在“下方”而不是“旁边”......我不明白......但突然间它现在起作用了。

如果您在Safari和Chrome中查看www.dodomainer.com，则标题中的两个图像会浮动，但不会显示在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（尽管最新）。一切都好。

只有2个带浮动的子div：left。

Answer 2

迈克尔，我觉得你的填充和浏览器计算盒子模型的各种方法可能会出现溢出问题。标题A的宽度为400，但图像在400 +填充范围内。删除填充或调整其容器大小以实际包含它。其他选项是将溢出设置为隐藏

Answer 3

这在我的FF和其他浏览器中看起来很好。

但是，您可能希望减少<{p>}中的padding

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

这可能会给你带来麻烦。

修改

由于padding-left:10px;已inline添加到img，原始问题可能已消失。如果删除，可能会再次遇到问题。