锚链接不能在桌面上工作，但在移动设备上工作答案

【问题标题】：Anchor link not working on desktop but works on mobile锚链接不能在桌面上工作，但在移动设备上工作
【发布时间】：2021-01-29 02:36:21
【问题描述】：

我在这个页面上有一个链接：http://www.appetiteforexcellence.com/young-chef/ 在页面上的文本中（“年”这个词）实际上并没有链接到桌面视图上的所需页面，但可以在移动设备上使用。检查元素时，我可以看到锚标签，但似乎无法正常工作。任何帮助将不胜感激。

谢谢

【问题讨论】：

您的div 与应该在您的文本下方的行类别覆盖文本。

标签： html css wordpress

【解决方案1】：

尝试将以下 div 包装在一个行类中：

<div class="row">
    <div class="col-md-10 col-md-offset-1 article-content page-content">...</div>
</div>

【讨论】：

谢谢，我遇到了同样的问题...添加包装解决了我的问题

【解决方案2】：

.page-id-98  .white-container .page-content {
  position: relative;
  z-index: 1
}

应该修复它。

它与下一个.row 重叠，点击没有到达它。或者，如果您不需要在下面的.row 上使用pointer-events，您可以在其上设置pointer-events:none，以允许click 事件通过，如下所示：

.page-id-98  .white-container .page-content + .row {
  pointer-events: none;
}

请注意，这第二个代码块是第一个代码块的替代品，而不是累积的（您不需要两者）。而且我相信第一个更好（可能的并发症更少）。

上面我试图解释为什么您的链接不起作用，因此您知道下次遇到此类问题时如何调试它。但实际的解决方案是按照其他人的建议将您的专栏包装在.row 中。主要原因是 Bootstrap 建议所有 [class^="col-"]s 应该是 .rows 的直接子代。如果不是这样，您将遇到负边距问题，并且您的内容将难以调试宽度从 992 像素到 1022 像素以及从 768 像素到 798 像素的水平滚动条。

【讨论】：

这不是一个好的解决方案，当您可以将列包装在行标签中时。
我相信只有在无法使用 CSS 解决方案时才应该提出标记更改，kkreft。按照您的原则，我应该建议重新设计网站。感谢您对一个完全有效的 CSS 解决方案投反对票，因为它不建议更改标记。
使用 CSS 解决方案可以解决问题，但无法解决问题。 HTML 标记中有一个明显的错误，因此在我看来，这是从根本上解决问题的正确位置。如果您认为添加引导行包装器是重新设计网站，那么可以。
也许您应该花时间解释为什么首选将列放在一行中。 SO 更多的是试图解释原则，而不是提供解决方案而不解释为什么它们是好的。新年快乐！

【解决方案3】：

我遇到了同样的问题，使用行包装器对我不起作用。我所做的是给 div 一个“位置”并将其 z-index 设置为 2。效果很好！像这样：

<div class="col-md-10 col-md-offset-1 article-content page-content" style="position:relative; z-index:2">...</div>

【讨论】：

【解决方案4】：

只需添加缺少的<div class="row">-Wrapper，如下所示：

<div class="white-container">
  <div class="container">
    <div class="row">
      <div class="col-md-10 col-md-offset-1 article-content page-content">
        <p style="text-align: left;">Here you will find all the information regarding Electrolux Australian Young Chef and this years program. to find out more about our past young chefs, click on the <a href="http://www.appetiteforexcellence.com/inspiration-series-peter-doyle/" onclick="_gaq.push(['_trackEvent', 'outbound-article-int', 'http://www.appetiteforexcellence.com/inspiration-series-peter-doyle/', 'years ']);"
        title="what does hospitality mean to Peter Doyle?">years </a>below.</p>
      </div>
    </div>
    <div class="row">
      <div class="col-md-3">
        <div class="homepage-page-item small-item">
          <a href="http://www.appetiteforexcellence.com/about-young-chef/">
            <img width="315" height="210" src="http://www.appetiteforexcellence.com/appetite/wp-content/uploads/2016/01/about-young-excellence-315x210.jpg" class="attachment-home-thumb wp-post-image" alt="2016 cul" /> <span>about young chef</span>
          </a>
        </div>
      </div>
    </div>
  </div>

【讨论】：