我有以下真的很奇怪.当我查看页面的来源时,一切看起来都不错,但页面看起来都错了.因此,我决定使用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是一个疯狂的标签…
有任何想法吗.
干杯
安东尼
解决方法
像其他人说的那样,这是因为你的标记无效.更进一步,问题是当解析器收到< a>< div>时在它的输入中,它可能意味着两件事：
>您忘记关闭锚标记,在这种情况下,它应该成为DOM中的< a>< / a>< div> …或者
>锚包装div,DOM应该是< a>< div>< / div>< / a>.
只有知道更多(可能更多)字符时才能做出正确的决定;正如您所料,解析会逐渐发生 – 即您可以在完全下载之前查看页面的某些部分.
不幸的是,Mozilla的HTML解析器(从Firefox 3.6及更早版本开始)是非确定性的 – 生成的DOM取决于HTML分成的部分,同时通过网络.
关于一个与你的问题非常相似的问题有a Mozilla bug.
我很抱歉,我不知道如何实现(也没有任何尝试实现的愿望;)原始问题的解决方案,但也许是涉及设置innerHTML(以避免解析器非确定性)的黑客攻击订购？
顺便说一下,检查HTML5解析算法应该如何处理你的标记会很有趣,因为这最终会在浏览器中实现.
