Question

我正在努力修复Firefox 3.6上朋友网页中的显示错误。它在所有其他浏览器中正确显示。我已经将问题缩小到这个范围：在大多数浏览器中，HTML生成并解析为：

<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/。主页看起来很好，但所有其他页面（通过单击顶部栏到达）都已损坏。

Answer 1

您的样本与您的网页不符。

问题是您的</div>标签不足。在class =“sidebar”的部分中，有三个div开始标记

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

但只有两个结束div标签，然后是结束部分标签。

在这种情况下，像Firefox 4及更高版本这样的现代浏览器遵循HTML5解析规则。解析器遇到时The relevant one says：

标记名称为以下之一的结束标记：“address”，“article”，“aside”，   “blockquote”，“button”，“center”，“details”，“dir”，“div”，“dl”，   “fieldset”，“figcaption”，“figure”，“footer”，“header”，“hgroup”，   “listing”，“menu”，“nav”，“ol”，“pre”，“section”，“summary”，“ul”

如果打开元素的堆栈在范围内没有元素   使用与令牌相同的标记名称，这是一个解析   错误;忽略令牌。

否则，请执行以下步骤：



生成隐含的结束标记。



如果当前节点不是具有相同标记名称的元素   作为令牌的那个，那么这是一个解析错误。



从打开元素堆栈中弹出元素直到元素   具有相同标记名称的标记已从堆栈中弹出。

在这种情况下，步骤1无效。第2步只是表明出现了问题，但第3步说明其中应该有一个</div>标记，然后将</section>标记与其开始标记相匹配。这就是为什么其他浏览器会将您的页面视为正常的原因。

但Firefox 3.x早于HTML5解析算法，这意味着您可以接受浏览器所具有的任何错误恢复。你可能会很幸运，你可能不会。在这种情况下，丢失的结束div标记会导致Firefox丢弃</section>标记，因为它不期望它。

Answer 2

根据一些快速研究，在FF4之前，Firefox似乎不再支持<section>。

https://developer.mozilla.org/en/HTML/Element/section

使用HTML5Shim（针对较旧的FF）可能有助于解决此问题吗？

http://code.google.com/p/html5shim/

Firefox 3.6部分渲染问题

2 个答案: