HREF链接在编辑CSS后不起作用

Question

我正在尝试更新朋友的网站，她需要保留GenBook按钮。我将当前网站的代码复制并粘贴到了我当前正在编写的代码中，直到我尝试在CSS中格式化它，它的工作正常。由于我希望它以她的徽标为中心，因此我需要编辑CSS。我不明白为什么编辑CSS会导致链接变得不活跃。

firefox中的实时预览：活动和未形式的活动链接，没有CSS（注意鼠标光标）

firefox中的实时预览：与CSS（注意鼠标光标）

#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和代码片段。那么...为什么它可以在预览中起作用，然后在预览中不起作用？

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

Answer 1

您的代码，您的后集在<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>