Firefox 3.6部分渲染問題

我正在修復Firefox 3.6上朋友網頁中的顯示錯誤。它在所有其他瀏覽器中正確顯示。我已經縮小到這個問題：在大多數瀏覽器中，生成的HTML和解析爲這樣：Firefox 3.6部分渲染問題

<section class="sidebar" style="height: 1106px; "><div class="sidebar-widget"><h3  class="sidebar-widget-title">Shopping Cart</h3><div id="sliding_cart" class="shopping-cart-wrapper"> 
    <p class="empty"> 
     Your shopping cart is empty<br> 
     <a target="_parent" href="https://underwateraudio.com/products-page/" class="visitshop" title="Visit Shop">Visit the shop</a> 
    </p> 

</div> </div></section> 

<section id="main-content"> ... </section>

然而，在Firefox 3.6中，頁面顯示出來，就像行</div> </div> </section>是不存在的。我在Firebug中查看它，並且出於某種原因，Firefox實際上正在取出該標籤。我無法弄清楚爲什麼Firefox 3.6將這個標籤剝離出來。

如果你想看到頁面本身，看看https://underwateraudio.com/underwater-audio-faq/。主頁看起來很好，但所有其他頁面（通過單擊頂部欄達到）都被打破。

來源

2011-08-30 Aaron Brown

有鏈接。沒有必要爲此丟掉你的帽子...... –

在FF6中看起來很好，可能只是FF 3.6的問題。 – Mrchief

您的樣品不符合您的網頁。

問題是你沒有足夠的</div>標籤。裏面帶class =「側邊欄」的部分，有三個DIV開始標記

<div class="sidebar-widget"> 
<div id="sliding-cart"> 
<div class="wpsc_cart_loading">

，但只有兩個下場div標籤，然後結束部分標籤。

在這種情況下，Firefox 4和更高版本等現代瀏覽器遵循HTML5解析規則。 The relevant one says當解析器遇到：

結束標籤，其標籤名稱是一個「地址」，「商品」，「擱置」，「塊引用」，「按鈕」，「中心」，「細節「，」dir「，」div「，」dl「，」fieldset「，」figcaption「，」figure「，」footer「，」header「，」hgroup「，」listing「，」menu「，」「，」ol「，」pre「，」section「，」summary「，」ul「

如果打開元素堆棧中沒有範圍內具有與標記相同標記名稱的元素，那麼這是一個解析錯誤;忽略令牌。

否則，執行這些步驟：

生成暗示結束標記。

如果當前節點不是與標記名稱相同的標記名稱爲的元素，那麼這是一個分析錯誤。

從堆棧中彈出元素，直到元素具有與令牌相同的標記名稱從堆棧彈出。

步驟1在這種情況下沒有影響。步驟2只是表明有什麼不對，但步驟3說推斷應該有一個</div>標籤，然後匹配</section>標籤和它的開始標籤。這就是爲什麼你的網頁被其他瀏覽器視爲OK的原因。

但是，Firefox 3.x會預先設定HTML5解析算法，這意味着您可以隨時隨地使用任何錯誤恢復功能。你可能會很幸運，你可能不會。在這種情況下，缺少end div標籤會導致Firefox放棄</section>標籤，因爲它並不期待它。

來源

2011-08-30 23:46:00 Alohci