2

使用 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 满意并正确渲染。

4

1 回答 1

1

要将班级居中unseen-label设置为班级的宽度unseen，然后为您的班级unseen-label设置margin:0 auto;宽度并根据需要对齐。我不在 Firefox 中，所以无法评论您所看到的内容。但是您可以将您的班级unseen设置为绝对位置，这将允许您使用负左上角左下角间距将其定位在任何地方。然后也摆脱 display inline-blockposition:relative;unseen-label

于 2012-11-06T16:45:27.043 回答