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>时，它可能意味着两件事：

您忘了关闭锚标记，在这种情况下，这应该在DOM中成为<a></a><div>...，或者
锚包装div，在这种情况下DOM应该是<a><div></div></a>。

只有知道更多（可能更多）的字符时才能做出正确的决定;正如您所料，解析会逐渐发生 - 也就是说，您可以在完全下载之前看到页面的某些部分。

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

关于一个看起来与你的问题非常相似的问题a Mozilla bug。

我很抱歉，我不知道如何实施（也没有任何尝试实施的愿望;）原始问题的解决方案，但也许是涉及设置innerHTML的黑客（以避免解析器非确定性）是有序的吗？

Answer 2

您不应将块元素/标记（如<div>）包装在内联标记中（例如<a>）。那是在惹麻烦。

Answer 3

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

浏览器遇到违反此规则的HTML，可以执行任何操作以解析页面（包括不显示页面），显然firefox对所有内容的解释不是和你的一样。

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

Answer 4

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

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

我使用服务器端嗅探在用户代理中查找“Firefox / 3”。如果找到，我会在<body>之后将其放在正确的位置：

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

这就在</body>之前：

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

在测试中，我发现只需在body标签后插入一个空的<script>标签就可以避免我遇到的问题。但是在表演/隐藏时感觉更正确，更安全。

很难确定FF到底在想什么 - 我很想知道这是否能解决其他问题。

我习惯为IE做这类事情。 FF3.x正在争夺我最不喜欢的浏览器奖项。

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

4 个答案: