Firefox和Chrome顯示“頂部：-5像素不同”

Question

使用Google Web Toolkit，我有一個帶DIV的DIV父級和錨定子級。

<div class="unseen activity">
  <div class = "unseen-label"/>
  <a href .../>
</div>

在使用以下CSS的情況下，Chrome會在錨點下方顯示“看不見的標簽”。 在Chrome和FireFox中均已正確放置。

但是，FireFox顯示的標簽與錨點對齊。

.unseen-activity div.unseen-label {
    display: inline-block;
    position: relative;
    top: -5px;
}

和

.unseen-activity a {
    background: url('style/images/refreshActivity.png') no-repeat;
    background-position: 0 2px;
    height: 20px;
    overflow: hidden;
    margin-left: 10px;
    display: inline-block;
    margin-top: 2px;
    padding-left: 20px;
    padding-right: 10px;
    position: relative;
    top: 2px;
}

請告訴我如何更改CSS，以便Chrome呈現標簽到錨點居中的位置。 但是，我需要讓FireFox保持快樂並正確渲染。

Answer 1

要居中你unseen-label類設置一個寬度上unseen類，然后為你unseen-label設置margin:0 auto; 以及寬度並根據需要對齊。 我不在Firefox中，所以無法評論您看到的內容。 但是您可以將unseen課程設置為position:relative; 然后將您unseen-label位置移到絕對位置，這將使您可以使用負的右上左下角底部間距將其放置在任何位置。 然后也擺脫顯示內聯塊