FirefoxのCSSの問題（要素間の不必要なスペース）

Question

私のサイトにはこのコメントセクションがあります。また、Firefoxでは、コメントの間にスペースがありません。私はこのスペースがどこから来ているのかを火かき棒で確認しましたが、正直なところ手がかりはありません。マージンや不要なスペースの場所には何もありません。私のサイトでhttp://jsfiddle.net/GuCAv/
：

JSfiddle http://ttrcustoms.us/testarea51/#track=1323924558

Answer 1

ok ...ここに高レベルの概要があります。あなたはdisplay：inline-blockを使用して、イメージをフローティングする必要があります。インラインブロックには既知の問題があります（なぜか分かります）。ここで起こっているのは、インラインブロックの設計上の欠陥であり、そのために空白が正しくレンダリングされません。使用する必要があるのはdisplay：ブロックしてイメージをフローティングすることです。唯一の問題は、いくつかのコメントが小さすぎることです（画像は現在流れていないので、画像は0pxに見えます）。これはコメントに最小の高さを付けることで簡単に解決されます。絶対：

.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; 
} 

それは、位置使用する際に注意しなければならないことに注意することも良いことだ：次のように私の知る限り、あなたのCSSはする必要があります。また、他の要素が関係している限り、それを効果的に0pxにするフローから要素を取り除きます。 .thecommentが流れていなくても、アバターはあなたのコメントをすべてアバターのように高くしていませんでした。これも修正されています。

Answer 2

多分あなたは、各コメントの間にスペース（3px）を意味し、[OK]を

私はこれがよりスパンを短くする

.thecomment { 
position: absolute; 
} 

を見ました他の人は、それを削除します。とにかく高さを教えてください

Answer 3

それはstyle=height: 58px;がそうしているようですが、高さを取り除くと問題が解決するはずです。

このスタイルではブロックが高くなったが、高さが設定されている他のスティールは同じ効果があると考えた。

固定高さを使用しないようにしてください。

これは最初のコメントです。

2番目（軽い背景）には、それを大きくしたものがアバターです。

また、絶対配置に関するもう1つの答えは、 の固定位置とサイズの代わりに、より流暢なレイアウトを使用することをお勧めします。