编辑css后href链接不起作用答案

【问题标题】：href link not working after editing css编辑css后href链接不起作用
【发布时间】：2016-10-24 20:20:37
【问题描述】：

我正在尝试更新我朋友的网站，她需要保留 Genbook 按钮。我将她当前站点的代码复制并粘贴到我正在编写的代码中，在我尝试用 CSS 对其进行格式化之前，它工作正常。因为我希望它以她的徽标为中心，所以我需要编辑 CSS。我不明白为什么编辑 CSS 会导致链接变为非活动状态。

Firefox 中的实时预览：活动且未格式化active link, without CSS (notice mouse cursor)

Firefox 中的实时预览：非活动和格式化inactive link, with CSS (notice mouse cursor)

#genbook {
  position: absolute;
  top: 210px;
  left: 50px;
}

<div id="genbook">
  <script src="https://www.genbook.com/bookings/booknowjstag.action?id=30216717&size=medium"></script>
  <noscript>
    <a href="https://www.genbook.com/bookings/slot/reservation/30216717?bookingSourceId=1000">
      <img src="https://www.genbook.com/bookings/images/booknow-button-medium.png" width="150" height="50" alt="Make an Online Appointment" border="0">
    </a>
    <br>
    <a href="http://www.genbook.com" style="font-size:10px;"></a>
  </noscript>
</div>

现在我更困惑了！它似乎正在使用 Codepen 和 Code Snippet。那么......为什么它会在预览中工作，然后在预览中不起作用？

新问题：我如何知道它是否真的有效？

【问题讨论】：

很可能是 z-index 问题，有东西覆盖了链接
按照上面的评论，只需检查浏览器控制台中的元素（右键单击）。在那里您可以查看是否有任何阻碍。
@DerekS 既然你们都提到了，那可能就是这样，因为我试图在整个页面上放置一个背景幻灯片（这也不起作用）（参见示例网站 asula com ）。不知道如何纠正这个......我可能不得不把按钮放在其他地方。谢谢！ :-)

标签： html css firefox href preview

【解决方案1】：

您的代码，您 postet，位于 <noscript></noscript> 标记中，而 <script src="https://www.genbook.com/bookings/booknowjstag.action?id=30216717&size=medium"></script> 将不同的代码加载到您的 DOM 中，这不起作用。您可以将其删除为 noscript，它会起作用。

#genbook {
  position: absolute;
  top: 210px;
  left: 50px;
}

<div id="genbook">
    <a href="https://www.genbook.com/bookings/slot/reservation/30216717?bookingSourceId=1000">
      <img src="https://www.genbook.com/bookings/images/booknow-button-medium.png" width="150" height="50" alt="Make an Online Appointment" border="0" />
    </a>
</div>

【讨论】：