Question

一位客户最近报告了他们网站的问题。他们将Firefox作为他们唯一的浏览器运行，大概一周前，Firefox开始以奇怪的方式在他们的网站上显示一些浮动的盒子（在第二排盒子上插入空白空间）。我已经分析了源代码，无法看到导致问题的原因 - 它在所有其他浏览器中都能正确显示，并且直到大约一周前才在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比其他{1}高1倍（尽管img元素似乎与其他元素具有相同的高度），因为它的宽高比图像不完全相同（并且您没有设置高度）。

我建议删除浮动并离开inline-block，您必须删除div.gallery-box标记之间的每个空格，否则三个图像将无法修复（因为那里）也是空白。）

Firefox中的浮动框

1 个答案: