Question

使用此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>

enter image description here

导致此解析问题的原因是什么？如何解决？

Answer 1

尝试将以下文档放入the 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规范adoption agency algorithm。这很时髦，但是，如果代码无效，则可能会产生时髦的结果。

在Firefox和Chrome中未正确解析HTML

1 个答案: