Firefox呈现错误 - 看到一些非常奇怪的东西

Question

我有以下真的很奇怪.当我查看页面的来源时,一切看起来都不错,但页面看起来都错了.因此,我决定使用firebug来查看源代码,并且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> 

但是萤火虫显示了这一点,它在屏幕上渲染,好像它是这样的:

<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是一个疯狂的标签...

有任何想法吗.

干杯安东尼

Answer 1

像其他人说的那样,这是因为你的标记无效.更深入一点,问题是当解析器<a><div>在其输入中收到时,它可能意味着两件事:

1. 你忘了关闭锚标签,在这种情况下,这应该<a></a><div>...在DOM中,或者
2. 锚包装div,在这种情况下DOM应该是<a><div></div></a>.

只有知道更多(可能更多)字符时才能做出正确的决定; 正如您可能已经注意到的那样,解析会逐渐发生 - 也就是说,您可以在完全下载之前看到页面的某些部分.

不幸的是,在这种情况下,Mozilla的HTML解析器(从Firefox 3.6及更早版本开始)是非确定性的 - 生成的DOM取决于HTML分成的部分,同时通过网络.

关于一个与你的问题非常相似的问题,有一个Mozilla错误.

我很抱歉,我不知道如何实现(也没有任何尝试实现的愿望;)原始问题的解决方案,但也许是一个涉及设置innerHTML(以避免解析器非确定性)的hack 是有序的？

顺便说一下,检查HTML5解析算法应该如何处理你的标记会很有趣,因为这最终会在浏览器中实现.