什麼可能導致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渲染問題？

回答

相關問題