什么可能导致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

我感到有些惊讶，它的表现不会超过它。

您已将块元素（h2）放在内联元素（a）中。标记被破坏了，不同的浏览器会做不同的事情来尝试充分利用它。可能发生的一件事是浏览器在块元素之前为链接添加结束标记。

使用内联标记代替h2标记，并使用CSS对其进行样式设置，使其看起来像您想要的那样。

Answer 2

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

我现在无法理解它，但是在Firefox中查看它时，链接会出现问题。如果在Firebug中打开“inspect element”，您会注意到渲染的DOM肯定会在完整视图和损坏视图之间发生变化。 Firebug还会在链接中添加_moz-rs-heading，有点解释here。

第一步绝对应该是making the markup W3C valid并检查它是否仍然存在。

Answer 3

我遇到了同样的问题。

http://www.jameshughbanks.com/

我把它缩小到了这个范围。它只发生在我围绕多个元素的链接时（在我的情况下，它涉及一个（或多个）块元素和一个（或多个）内联元素。

这很奇怪，因为它似乎只影响你使用我上面描述的方法创建的“每隔一个”“错误”。它将修改第一个和第三个div输出，但不修改第二个。 （起初它只影响了第二个，但我部分解决了这个问题（它过去常常弄乱了H2），但是将h2的链接放在一起只会使它们无法获得错误。

因此，归结为仅能够在1个块元素周围放置链接，我没有使用多于1个块元素测试错误，只测试了块元素和多个内联元素的不匹配。

如果有任何人在Firefox中遇到此问题的解决方法，请告诉我们。它似乎不会发生在IE，Opera或Chrome中。

对于那些认为这是不好的标记的人来说，它被包含在html5的下一个版本中是有效的，并且它是唯一的方式（没有javascript / etc）来做这些类型的链接。 Firefox显然被编码为正确显示此标记，但由于某种原因，某些类型的错误使得它有时会因为未知原因而以不同方式呈现。无论是需要修复还是开发解决方案，我都可以将每个元素作为自己的单独块并可能修复它，但这是很多额外的不必要的代码。

Answer 4

适用于Safari，Chrome和Firefox 3.5。

我一直试着刷新。重复你的问题没有运气。您是否尝试过清除缓存？

检查Safari或Web Developer（FF插件）中的元素也不会发现任何异常。

N00B BLAZE总是每次看到问题时都会混淆或是随机的吗？

Answer 5

对我而言，有时Firefox并没有正确加载CSS，它通常都是它的全部内容，而不是像发生在你身上的那样。对我来说，它正确加载。您最近是否有机会更改它并且不允许正确刷新？

Answer 6

当我嗡嗡你的网站时，我在FF3.6中遇到了问题。使用Firebug来查看HTML，问题在于显示错误的行在<a>内的文本周围有一个额外的<span>。也许你的数据库中包含了一些只应该是文本的HTML？