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位置设置为绝对位置，这样您就可以使用负右上左下方间距将其放置在任何位置。然后还摆脱显示内联块

Firefox和Chrome显示“顶部：-5px不同”

1 个答案: