css - Firefox 中的 float 框

Question

一位客户最近报告了他们网站的一个问题。他们将 Firefox 作为他们唯一的浏览器运行，突然间，大约一周前，Firefox 开始以一种奇怪的方式在他们的网站上显示一些 float 的框(在第二行框上插入空白)。从那以后，我分析了源代码，但看不出是什么导致了问题——它在所有其他浏览器中都能正确显示，直到大约一周前，它才在 Firefox 中正确显示。在此期间没有对源代码进行任何更改。

Webkit 截图 - http://postimg.org/image/jow77ae7b/

Firefox 截图 - http://postimg.org/image/5txwotjs7/

这很可能只是需要一双全新的眼睛。应用于显示的每个框的“gallery-box”类的 CSS 包含在下面:

HTML

<div class="gallery-grid">
  <div class="gallery-box">
    <div class="gallery-box-content">
      Content of box...
    </div>
  </div>

  <!-- Repeat <div class="gallery-box"></div> -->
</div>

CSS

.gallery-box {
    float:    left;
    width:    33.33%;
    overflow: hidden;
    display:  inline-block;
}

在此先感谢您提供的任何帮助，非常感谢!

Answer 1

这是一种舍入问题，第一个 .gallery-box 比其他元素高 1px(尽管 img 元素似乎与其他)，因为图像的纵横比不完全相同(并且您没有设置高度)。

我建议删除 float 并保留 inline-block，您必须删除 div.gallery-box 标签之间的所有空格，否则三个图像不会排成一行(因为还有空格)。