具有与DIV ID相同名称的NAME命名锚点（A）冲突

Question

我正在处理一个使用监听器的网站，用于显示和隐藏内容DIV并滚动到相同名称的命名锚点。

我遇到了一个奇怪的问题，它不是滚动到锚点，而是滚动到ID与锚点名称相同的DIV。

一旦我将DIV ID更改为不同的名称，行为就符合预期了。

我似乎找不到任何关于此的文档，想知道这是否是记录下来的行为。

可行代码：

<a name="top">top</a>

<p id="bottomx" style="height: 1800px;">
<a href="#top">top</a>
<a href="#bottom">bottom</a>
<br>
</p>
<a name="bottom">bottom</a>

未达到预期效果：

<a name="top">top</a>

<p id="bottom" style="height: 1800px;">
<a href="#top">top</a>
<a href="#bottom">bottom</a>
<br>
</p>
<a name="bottom">bottom</a>

在第二个示例中，它将滚动到名为“bottom”的P。同样，如果我在页面底部创建一个ID为“bottom”的DIV，并且我点击page.html#bottom，它会滚动到该DIV。

这似乎很令人困惑。有没有想法为什么会以这种方式工作？Safari和FF的行为相同。

- Jazzy

---

有趣的是，在HTML5规范中我很难找到这个。 - Matt Ball

我在HTML4规范中找到了这个内容：“id和name属性共享相同的命名空间。这意味着它们不能同时在同一文档中定义具有相同名称的锚点。” 我认为在HTML5规范中重新定义了这一点，以考虑浏览器实现的常见行为。 - Felix Kling

Answer 1

id属性优先于name属性:

对于HTML文档（和HTML MIME类型），必须按照以下处理模型来确定文档的指定部分。

1. 解析URL，并将fragid作为URL的组成部分。

2. 如果fragid为空字符串，则文档的指定部分是文档的顶部；在此处停止算法。

3. 让decoded fragid成为将任何有效UTF-8序列中的百分编码八位组扩展为Unicode字符的结果。如果该字符串中的任何百分编码八位组不是有效的UTF-8序列（例如，它们扩展为代理代码点），则跳过此步骤和下一步骤。

4. 如果未跳过此步骤并且DOM中有一个ID完全等于decoded fragid的元素，则树顺序中的第一个这样的元素是文档的指定部分；在此处停止算法。

5. 如果DOM中有一个a元素，其名称属性的值恰好等于fragid（而不是decoded fragid），则树顺序中的第一个这样的元素是文档的指定部分；在此处停止算法。

6. 如果fragid是与字符串“top”不区分大小写的ASCII匹配项，则文档的指定部分为文档的顶部；在此处停止算法。

7. 否则，没有指定文档的部分。

- steveax

---

我想我从未考虑过除了<a name="blah"></a>之外，你还可以使用哈希来滚动到任何其他ID或名称。今天我学到了新东西。 - Jazzy

Answer 2

HTML 4.01和XHTML 1.0规范要求元素中的name属性不能与id属性的值相同，除非设置在同一元素上，否则文档就会出错。浏览器可以自由应用其自己的错误处理，这可能是相当不可预测的。

HTML5草案指定了复杂的错误处理规则，但它们也宣布元素中的name属性已经过时。

在同一文档中使用相同的id值对于两个元素来说是不合逻辑的（并且正式禁止），因为id的目的和唯一目的是为元素提供一个唯一标识符。在HTML的历史中，<a name=...>结构先于id出现，并且始终旨在在受限制的环境中扮演与id相同的角色。因此，自然而然地将其视为相同的方式进行处理。

- Jukka K. Korpela