Firefox 渲染出错 - 看到一些非常奇怪的东西

Question

我的以下情况真的很奇怪。基本上，当我查看页面的源代码时，一切看起来都很好，但页面看起来完全错误。所以我决定使用 firebug 查看源代码，而 firebug 显示了一个非常不同的故事。但是，如果我刷新页面，页面看起来不错，并且源和萤火虫匹配。

请参阅下面的源代码，但 firefox 显示的内容和 firebug 显示的内容：

查看源代码显示此内容：

<div class="mainpanel">  
    <a class="thumbphoto" onclick="window.location=this.href;return false;" href="/Photograph/Narooma/Little-Rock"> 
        <div class="thumbphotoimage"><table cellpadding="0" cellspacing="0"><tr><td><img src="/Assets/Photos/Portfolio/BB001D_0.jpg" alt="Little Rock" /></td></tr></table></div>
        <div class="thumbphototitle">Little Rock</div> 
    </a>  
    <a class="thumbphoto" onclick="window.location=this.href;return false;" href="/Photograph/Narooma/Split-Rock"> 
        <div class="thumbphotoimage"><table cellpadding="0" cellspacing="0"><tr><td><img src="/Assets/Photos/Portfolio/BB002D_0.jpg" alt="Split Rock" /></td></tr></table></div>
        <div class="thumbphototitle">Split Rock</div>
    </a>  
    <a class="thumbphoto" onclick="window.location=this.href;return false;" href="/Photograph/Narooma/Rock-Pointer"> 
        <div class="thumbphotoimage"><table cellpadding="0" cellspacing="0"><tr><td><img src="/Assets/Photos/Portfolio/BB003D_0.jpg" alt="Rock Pointer" /></td></tr></table></div>
        <div class="thumbphototitle">Rock Pointer</div>
    </a>   
</div> 

但 firebug 显示此内容，并且它在屏幕上呈现为如下所示：

<div class="mainpanel">  
    <a class="thumbphoto" onclick="window.location=this.href;return false;" href="/Photograph/Narooma/Little-Rock"> 
        <div class="thumbphotoimage"><table cellpadding="0" cellspacing="0"><tr><td><img src="/Assets/Photos/Portfolio/BB001D_0.jpg" alt="Little Rock" /></td></tr></table></div>
        <div class="thumbphototitle">Little Rock</div> 
    </a>  

    <a class="thumbphoto" onclick="window.location=this.href;return false;" href="/Photograph/Narooma/Split-Rock"></a> 
    <div class="thumbphotoimage"><table cellpadding="0" cellspacing="0"><tr><td><img src="/Assets/Photos/Portfolio/BB002D_0.jpg" alt="Split Rock" /></td></tr></table></div>
    <a class="thumbphoto" onclick="window.location=this.href;return false;" href="/Photograph/Narooma/Split-Rock"> </a> 
    <div class="thumbphototitle">
        <a class="thumbphoto" onclick="window.location=this.href;return false;" href="/Photograph/Narooma/Split-Rock">Split Rock</a>
    </div> 
    <a class="thumbphoto" onclick="window.location=this.href;return false;" href="/Photograph/Narooma/Split-Rock"> </a> 

    <a class="thumbphoto" onclick="window.location=this.href;return false;" href="/Photograph/Narooma/Rock-Pointer"> 
        <div class="thumbphotoimage"><table cellpadding="0" cellspacing="0"><tr><td><img src="/Assets/Photos/Portfolio/BB003D_0.jpg" alt="Rock Pointer" /></td></tr></table></div>
        <div class="thumbphototitle">Rock Pointer</div>
    </a>   
</div>

有问题的 html 是中间的 a 标签，该标签变得疯狂......

任何想法。

干杯 安东尼

Answer 1

正如其他人所说，发生这种情况是因为您的标记无效。更深入一点，问题在于，当解析器在其输入中收到

时，可能意味着两件事：

1. 您忘记关闭锚标记，在这种情况下在 DOM 中应变为
   ...，或者
2. 锚点包裹 div，在这种情况下 DOM 应为

   。

只有当知道更多（可能更多）字符时才能做出正确的决定；正如您可能已经注意到的那样，解析是逐步进行的——即您可以在页面完全下载之前看到页面的部分内容。

不幸的是，Mozilla 的 HTML 解析器（从 Firefox 3.6 及更早版本开始）在这种情况下是不确定的——生成的 DOM 取决于 HTML 在通过网络时被分割成的部分。

有一个Mozilla bug，其问题与您的问题非常相似。

我为你感到抱歉，我不知道如何实现（也不想尝试实现；）解决你原来的问题，但也许是一个涉及设置 innerHTML 的黑客（以避免解析器非确定性）是否合适？

顺便说一句，检查 HTML5 解析算法如何处理您的标记会很有趣，因为这最终将在浏览器中实现。

Answer 2

您不应将块元素/标签（如

）包装在内联标签（如 ）中。那是自找麻烦。

Answer 3

那是因为您的 HTML 无效。行内元素只能包含其他行内元素，不能包含块元素。

浏览器遇到违反此规则的 HTML 时可以执行任何操作来解析页面（包括不显示页面），并且显然 Firefox 对 anything-at-all 的解释与您的不同。

请注意，您可以通过设置 display css 属性将 等内联元素转换为块元素。但我不完全确定这对于具有附加语义的元素（例如 标记）是否合法。当然，您可以将这些 div 转换为内联元素。

Answer 4

我不想停止将块元素放入锚点内。它太有用了：
http://html5doctor.com/block-level-links-in-html- 5/

我开发了一种解决方法，似乎可以禁用渐进式渲染并避免此问题。

我使用服务器端嗅探在用户代理中查找“Firefox/3”。如果找到，我将其放在 之后：

<script type="text/javascript">
      // hack for firefox 3.x progressive rendering pessimism
      document.body.style.display = 'none';
</script>

在 之前：

<script type="text/javascript">
      document.body.style.display = 'block';
</script>

在测试中，我发现只需插入一个空 body 标记之后的

很难确定 FF 的真实想法 - 我很好奇这是否可以解决其他人的问题。

我已经习惯在 IE 上做这样的事情了。 FF3.x 正在争夺我最不喜欢的浏览器新奖。