html - 编辑 css 后 href 链接不起作用

Question

我正在尝试更新我 friend 的网站，她需要保留 Genbook 按钮。我将她当前站点的代码复制并粘贴到我目前正在编写的代码中，在我尝试使用 CSS 对其进行格式化之前，它工作正常。因为我希望它以她的 Logo 为中心，所以我需要编辑 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。那么...为什么它会在预览中工作然后在预览中不工作？

新问题:我怎么知道它是否真的有效？

Answer 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>