什么可能导致Firefox中的HTML/CSS渲染问题？

的风格：什么可能导致Firefox中的HTML/CSS渲染问题？

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中呈现不同的偶然。有时，它显示了像它应该，有时在这个奇怪的格式显示为在这里看到：

Example

我从来没有过这样的事情发生之前，没有人知道是什么引起的呢？它甚至为其他人做这件事吗？就像我之前说过的，有时候它会加载得很好（完全相同的HTML，CSS和所有内容），有时却不会。这似乎是随机的。它在IE中加载得很好，根本没有奇怪的问题。

来源

2010-02-18 animuson

适用于我的FF 3.6 – 2010-02-18 23:12:09

有趣。我完全可以在FF3.6上重现它，实际上我更频繁地得到了破碎的版本。

现在我无法理解它，但是在Firefox中查看它时，链接中出现了某些内容。如果您在Firebug中打开“检查元素”，您会注意到呈现的DOM在完整视图和断开视图之间肯定发生变化。 Firebug还会将_moz-rs-heading添加到链接中，这可以解释为here。

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

来源

2010-02-18 23:18:10

更改所有h2标签以跨越一个类似乎已经解决了这个问题，但我无法弄清楚如何在跨度和下面的文本之间添加5px的空间而不使用块级元素。 – animuson 2010-02-18 23:27:58

在Safari，Chrome和Firefox 3.5中适合我。

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

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

N00B BLAZE是否每当你看到问题或者是随机的时候都会搞砸？

来源

2010-02-18 23:13:08 Mark

我玩过一段时间，它似乎总是第二个混乱的环节。我注意到，每当我上传一个新版本的页面，它显示正确的第一次，当我刷新页面它再次拧紧... – animuson 2010-02-18 23:16:20

对我而言，有时候Firefox并没有正确地加载CSS，通常都是这样，而不是部分发生在你身上。对我来说它正确加载。你最近有没有更改过它，并且不允许正确刷新？

来源

2010-02-18 23:16:02 Gotjosh

我感到有些惊讶，它不会比它做得更多。

您已将块元素（h2）放入内联元素（a）中。标记被打破，不同的浏览器会做不同的事情来尽力做到最好。可能发生的一件事是浏览器在块元素之前为链接添加了一个结束标记。

我们使用内联标签而不是h2标签，并使用CSS将其设置为您想要的样式。

来源

2010-02-18 23:17:30 Guffa

非常好的一点，可能是问题的根源，但它仍然doesn真的不能解释为什么它会改变刷新之间的行为（它绝对会这样做）。 – 2010-02-18 23:18:41

当我嗡嗡声您的网站时，FF3.6中出现了我的问题。使用Firebug浏览HTML，问题在于显示不正确的行在<span>内有一个额外的围绕文本的<a>。也许一些HTML包含在你的数据库里，它应该只是文本？

来源

2010-02-18 23:26:34 chprpipr

目前它没有访问数据库，它只是一个PHP文件中的纯HTML，所以我可以测试它的外观。 – animuson 2010-02-18 23:37:54

我遇到同样的问题。

http://www.jameshughbanks.com/

我已经收窄到这一点。它只发生在我围绕多个元素（在我的情况下，它涉及一个（或多个）块元素和一个（或多个）内联元素）的链接时发生的。

这看起来很奇怪只会影响你使用上面描述的方法创建的“其他”错误，它会修改第一个和第三个div输出，但不会修改第二个（首先它只影响第二个，但我部分修复了问题它曾经搞乱H2的，但是把链接放在h2的链接上，只能将它们从错误中删除。

因此，只能在1个块元素周围放置一个链接，我还没有测试过多于1个块单元的错误，只有块单元和多个直接单元的错配。

如果任何人有任何解决这个问题在Firefox中请让我知道。它似乎没有发生在IE，Opera或Chrome中。

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

来源

2010-09-02 18:00:48 Josh

什么可能导致Firefox中的HTML/CSS渲染问题？

回答

相关问题