时间戳

首页 > 解决方案 > 我的代码中有可在 FF 中使用但在 Chrome 中不可用的锚点

html - 我的代码中有可在 FF 中使用但在 Chrome 中不可用的锚点

问题描述

它们都在以“游戏预定进行”开头的第二段中。链接“Slips and mooring balls”应该链接到页面下方名为“Slips and Anchoring”的标题，而“酒店住宿”链接应该链接到页面下方的标题“酒店住宿”。

两个锚点的两个链接通过 Firefox 内外网络和外部网络工作。但是，锚链接不能通过谷歌浏览器工作

关联

标签： htmlanchor

解决方案

为了跳转到页面的某个部分，您需要使用id目标元素上的属性，而不是name属性。HTML 标准的早期版本支持使用后者，但现在被认为已过时，并且无法在浏览器中一致地工作。

此外，您不需要a在跳转的位置放置一个空标签——您可以简单地id为要跳转到的元素添加一个属性。

好的

这是更改页面以实现所需功能的最简单但不是最好的方法。

<strong id="SlipsandAnchoring">
  <span style="font-size: 18px;">
    Slips and Anchoring<br>
    <img .../>
  </span>
</strong>

更好的

以前的解决方案有效，但对于有障碍的用户来说并不是特别容易访问，尤其是那些使用屏幕阅读器进行导航的用户。

解决此问题的一个快速折衷方案是将标题分解为自己的元素，屏幕阅读器可以专注于这些元素。然后，您可以将该部分包装在 a 中div，这有助于传达页面的层次结构。

<div id="SlipsandAnchoring">
  <p style="font-size: 18px; font-weight: bold;">Slips and Anchoring</p>
  <img .../>
</div>

最好的

然而，最好的解决方案是将页面的每个部分包装在一个section标签中。部分对相关内容进行分组，是在 HTML5 中分隔页面不同部分的首选方式。

除了作为语义最佳实践之外，部分标签还可以通过屏幕阅读器轻松导航到，因为大多数软件都熟悉标签的含义。

完成此操作后，您还应该使用标题标签来指示标题是页面上的重要标志。

section h4 {
  font-size: 18px;
  font-weight: bold;
  margin: 0;
}

section img {
  width: 300px;
  height: 202px;
  border-width: 0px;
  border-style: solid;
  object-fit: cover;
}
<section id="SlipsandAnchoring">
  <h4>Slips and Anchoring</h4>
  <img src="//s3.amazonaws.com/ClubExpressClubFiles/710182/graphics/St._Augustine_Sailboats_Anchored_Pixabay_1494285995.jpg" alt="St. Augustine Sailboats Anchored Pixabay">
</section>

推荐阅读