Question

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

我无法让图片触摸到顶部和底部而不会弄乱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>内，看看它是做什么的。

css3中的Firefox列

1 个答案: