Firefox的CSS问题（元素之间的无用空间）

我在我的网站上有这个评论部分，而在Firefox中，每个评论之间有一点空间，我不想要它。我已经检查过萤火虫这个空间可能来自哪里，但我真的不知道。没有保证金或任何在无用空间的地方。Firefox的CSS问题（元素之间的无用空间）

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

2012-01-05 CupOfTea696

你的Firefox是什么版本？它在4.0看起来很好 – Jung3o 2012-01-05 13:47:45

它是父表的边界间距吗？ – clem 2012-01-05 13:50:39

好的...这里是高层次的破败。您正在使用display：inline-block，您应该在其中浮动图像。内联块有已知的问题，应该谨慎使用（你可以看到为什么）。这里发生的是内联块的设计缺陷，导致它错误地渲染空白区域。你应该使用的是display：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; 
}

这也是很好的注意，你应该使用位置时一定要小心：绝对的。它还将流量元素排除在外，使其有效地高达其他元素所关注的高度。注意力不在流动中，但头像不会让你的所有评论与头像本身一样高。这也解决了这个问题。

来源

2012-01-05 14:23:12

但是，这确实解决了问题，但是，现在当评论的高度比头像长时，文本会在头像下，我不希望发生这种情况（我使用绝对定位的准确原因，并让jQuery得到评论的高度，并相应地设置所有其他元素的高度。）请参阅：http://jsfiddle.net/GuCAv/3/ – CupOfTea696 2012-01-05 16:34:19

@ CupOfTea696然后我会做的是，而不是将图像左侧浮动，创建一个包装的图像，给它一个100％的高度，并漂浮左。你可以在这里看到一个工作演示：http://jsfiddle.net/wvXX3/1。还要注意，.comment和.fadecomment的显示属性会干扰布局。我会在我的演示中删除它们。 – 2012-01-05 18:00:19

感谢您的帮助，这解决了一切！对不起，我已经离开了一段时间。 – CupOfTea696 2012-01-12 15:24:52

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

我看到

.thecomment { 
position: absolute; 
}

这使跨度比短其他人，删除它。或者反正给高度

来源

2012-01-05 13:49:21

看来style=height: 58px;是这样做的，去掉高度应该可以解决问题。

我觉得这种风格让这个区块更高，但其他高度集合的stlyes可以达到同样的效果。

尽量不要使用固定高度。

这是第一条评论。

对于第二个（较浅的背景），使它变大的是头像。

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

来源

2012-01-05 13:57:47

jQuery添加了这些固定大小以使所有事情都处于正确的高度，这在Chrome中完美运行。 – CupOfTea696 2012-01-05 16:35:11

Firefox的CSS问题（元素之间的无用空间）

回答

相关问题