Question

我必须将给定的网页设计转换为CMS的模板。当我这样做的时候，我意识到，这个设计确实搞砸了Firefox：

我并不深入网页设计，但我能够将其缩小为div（.inside），其中包含另外两个div（.titel和.logo）和一个<figure>包含<img>。

在Chrome（第33版）和IE（第10版）中，图像在两个div下呈现（正如设计师所预期的那样） - 在Firefox中，图像与其他两个元素一致地插入。 / p>

看到区别： https://imagizer.imageshack.us/v2/249x342q90/34/e5yj.png

我准备了一个jsfiddle： http://jsfiddle.net/5zu32/embedded/result/

粗略代码：

<div class="inside">
    <div class="titel"></div>
    <div class="logo"></div>
    <div class="main_image block">
        <figure class="image_container">
            <img src="foo" alt="img test" height="323" width="853">
       </figure>
    </div> 
</div>

我试图移除＆＃34;块＆＃34; class（只删除溢出：隐藏），但这会搞砸原始设计。（在演示中没有这么清楚。）

（马的图片是一个随机的互联网图像，恰好与我用过的图像大小相同）

我希望有人可以帮助我吗？我该如何解决这个问题？

顺便说一句：我是网站新手，如果我做错了，请告诉我:)

Answer 1

尝试使用

.main_image {
     clear: both;
     ...
}

这将清除浮动：你之前使用过的。

Answer 2

通过在main_image类中添加clear: both;，可以清除显示问题。

DEMO

Firefox没有用图像包装div

2 个答案: