firefox - css3 中的 Firefox 列

Question

这是我正在构建的网站的链接：

http://joshrcook.com/test

在不弄乱 Firefox 的列的情况下，我无法让图片触及顶部和底部。我可以将图像向左浮动，但这似乎破坏了-moz-column-count。有任何想法吗？

这是图片的html：

<div id="img-wrapper">
    <?php for($i = 1; $i <=25; $i++) { ?>
    <div class="photo">
        <a href="#"><img src="img/arrow_up_alt1_32x32.png" class="overlay overlay1" /></a>
        <a href="#"><img src="img/fullscreen_32x32.png" class="overlay overlay2" /></a>
        <a href="#"><img src="img/heart_fill_32x38.png" class="overlay overlay3" /></a>
        <?php echo '<img src="img/tumblr_img_' . $i . '.jpg" class="main_photo" />'; ?>
    </div>
    <?php } ?>

</div>

这是CSS：

 #img-wrapper {
  width: 960px;
  -moz-column-count: 3;
  -webkit-column-count: 3;
  column-count: 3;
}

.photo {
  width: auto;
  position: relative;
  width: 320px;

}

.photo a img.overlay {
  position: absolute;
  z-index: 10;
  top: 0;
  left: 0;
}

.photo a img.overlay1 {
  left: 25%;
}

.photo a img.overlay2 {
  left: 45%;
}

.photo a img.overlay3 {
  left: 65%;
}

.photo img.main_photo {
  width: 320px;
  border-radius: 10px;
}

Answer 1

.photo {
  width: auto;
  position: relative;
  width: 320px;
  margin-bottom: -5pt;
}

以上似乎在 Chrome（发行版）和 IE9 中运行良好。我没有其他浏览器可以在这台机器上测试，但我会从那里开始。

也可能是因为浏览器如何解释您的空格（边距/填充看起来都设置为 0，所以问题不应该存在。尝试消除每个空格中的空格<div class="photo"></div>，看看有什么作用。