Question

我在我的网站上有这个评论部分，在Firefox中，每个评论之间有一些空间，我不想要它。我已经用萤火虫检查了这个空间可能来自哪里，但老实说我没有任何线索。在不需要的空间的地方没有边缘或任何东西。

JSfiddle：http://jsfiddle.net/GuCAv/
在我的网站上：http://ttrcustoms.us/testarea51/#track=1323924558

Answer 1

好的......这是高级别的破坏。您正在使用display：inline-block，您应该在其中浮动图像。内联块已知问题，应谨慎使用（如您所知）。这里发生的是内联块中的设计缺陷，导致它不正确地渲染空白区域。您应该使用的是显示：阻止然后浮动图像。唯一的问题是一些评论太小的事实（图像现在不流动，使其显示为0px高）。通过给出评论最小高度可以很容易地解决这个问题。据我所知，你的CSS应该如下：

.fadecomment, .comment {
    position: relative;
    width: 100%;
}

.even {
    position: relative;
    background-color: #303030;
    padding-top: 2px;
    padding-bottom: 2px;
    width: 100%;
    z-index: 0;
    display: block;
    min-height: 36px;
}

.odd {
    position: relative;
    background-color: #404040;
    padding-top: 2px;
    padding-bottom: 2px;
    width: 100%;
    z-index: 0;
    display: block;
    min-height: 36px;
}

.avatar32 {
    width: 32px;
    height: 32px;
    float: left;
    margin: 2px 4px 2px 6px;
}

.thecomment {
    font-size: 11px;
    padding-right: 16px;
}

还可以注意到使用position：absolute时应该小心。它还使元素流出，使其有效地达到0px高，就其他元素而言。让.thecomment失去流量，但化身并没有使你的所有评论都像化身本身一样高。这也解决了这个问题。

Answer 2

也许你的意思是每个评论之间的空格（3px），好的

我看到了

.thecomment {
position: absolute;
}

这使得跨度比其他人短，删除它。或者给出一个高度

Answer 3

似乎style=height: 58px;正在这样做，删除高度应解决问题。

我认为这种风格使得该块更高，但其他高度设定的stlyes可以产生相同的效果。

尽量不要使用固定的高度。

这是第一个评论。

对于第二个（较轻的背景），使它更大的是化身。

关于绝对定位的另一个答案也是一个很好的提示，使用更流畅的布局而不是建议固定位置和尺寸。

Firefox css问题（元素之间不需要的空间）

3 个答案: