html - 什么可能导致 Firefox 中出现此 HTML/CSS 呈现问题？

Question

样式:

h2 {
    color: #71D0FF;
    font-size: 11px;
    font-weight: bold;
    margin: 0px 0px 5px 0px;
}
a.box {
    color: #FFFFFF !important;
    cursor: pointer;
    display: block;
    padding: 10px;
    text-align: justify;
}
a.box:hover {
    background-color: #0C0C0C;
}
a.box span.down {
    display: block;
    color: #D04242;
    float: right;
    font-size: 11px;
    margin-left: 5px;
}
a.box span.up {
    display: block;
    color: #71D013;
    float: right;
    font-size: 11px;
}
span.noob {
    color: #FFA142;
}
span.pro {
    color: #A142A1;
}

HTML(每个链接基本上重复):

<a href="/library/blaze" class="box">
<span class="down">-0</span>
<span class="up">+0</span>
<h2><span class="noob">NOOB</span> BLAZE</h2>
HAS CREATED 0 MAPS, WON 0 BATTLES, AND LOST 0 MAPS
</a>

我不明白的是为什么它偶尔在 Firefox 中呈现不同。有时它会按预期显示，有时会以这种奇怪的格式显示，如下所示:

我以前从来没有发生过这样的事情，有人知道是什么原因造成的吗？它甚至会为其他人这样做吗？正如我之前所说，有时它加载得很好(完全相同的 HTML、CSS 和所有内容)，有时却不能。似乎有点随意。它在 IE 中加载得很好，没有任何奇怪的问题。

Answer 1

很有趣。我绝对可以在 FF3.6 上重现它，实际上我更经常得到损坏的版本。

我现在无法理解它，但在 Firefox 中查看它，链接有问题。如果您在 Firebug 中打开“检查元素”，您会注意到渲染的 DOM 在完整 View 和损坏 View 之间肯定会发生变化。 Firebug 还会将 _moz-rs-heading 添加到链接中，这有点像 here 的解释。 .

第一步肯定是making the markup W3C valid并检查它是否仍然发生。