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

我的以下情况真的很奇怪。基本上，当我查看页面的源代码时，一切看起来都很好，但页面看起来完全错误。所以我决定使用 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><div>在其输入中，它可能意味着两件事：

1. 您忘记关闭锚标记，在这种情况下，这应该变成<a></a><div>...在 DOM 中，或者
2. 锚点包裹了 div，在这种情况下 DOM 应该是<a><div></div></a>.

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

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

There's Mozilla 错误 https://bugzilla.mozilla.org/show_bug.cgi?id=414418关于一个与您的问题非常相似的问题。

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

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