1

使用此 HTML 片段，当在 Firefox 和 Chrome 中显示时，最顶部的 google 链接包含在其下的每个元素中。

 <div>
    <a href="http://www.google.com/">
        <div>
            <div>                     
                <div>
                    <div>
                        <a>a tag</a>
                    </div>
                    <img />        
                    <h3>a title</h3>
                    <p>a description</p>
                    <div>a detail</div>
                </div>
            </div>
        </div>
    </a>
</div>

在此处输入图像描述

是什么导致了这个解析问题，我该如何解决？

4

1 回答 1

3

尝试将以下文档放入W3C Validator：

<!DOCTYPE html>
<html>
    <head>
        <title>Parse error?</title>
    </head>
    <body>
        <div class="g23">
            <a href="http://www.google.com/">
                <div class="article-bg">
                    <div class="splash-border-right">                     
                        <div class="splash-content-margin">
                            <div>
                                <a href="http://www.google.com/">a tag</a>
                            </div>
                            <img src="http://www.google.com/image.jpg" />        
                            <h3 class="splash">a title</h3>
                            <p>a description.</p>
                            <div class="read-time">a min</div>
                        </div>
                    </div>
                </div>
            </a>
        </div>
    </body>
</html>

请注意，此文档不是有效的 HTML5。第一个错误：

第 13 行，第 65 列：看到了一个开始标记，但同类型的元素已经打开。

也就是说，a标签不得包含其他a标签。根据评论中的Alohci的说法，Chrome 和 Firefox 的行为符合 HTML5 规范针对这种情况的采用代理算法。它很时髦，但是，对于无效代码，可以预料到时髦的结果。

于 2013-09-06T22:46:28.110 回答