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

【问题标题】：Firefox and Chrome Display "top: -5px differently"Firefox 和 Chrome 显示“顶部：-5px 不同”
【发布时间】：2012-11-06 16:35:29
【问题描述】：

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

【问题讨论】：

标签： html css

【解决方案1】：

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

【讨论】：

您确实解决了我发布的问题。但是，我使用的是 Google Web Toolkit。在我对 core.css 文件进行更改后，我的运行时 Web 应用程序仍然表现出我所描述的丑陋行为。另一个团队成员提到我的 CSS 可能被另一个 CSS 标签覆盖。您提出的更改使用 Firebug 有效，但我也遇到了 CSS/GWT 问题。有什么想法吗？
如果你能提供 URL 会更容易，这样我就可以在 firebug 和开发人员工具中查看以获取正确的 CSS。