Prestashop标题添加图标/链接不可点击

Question

我需要一些标题图标的帮助。我在徽标附近添加图标，我想用链接制作它们，但它们不起作用。我可以点击徽标，但我无法点击它们。 这是代码的一部分： <a id="header_logo" href="{$base_dir}" title="{$shop_name|escape:'htmlall':'UTF-8'}"> <img class="logo" style="margin-bottom:10px;" src="https://www.irankiuparduotuve.lt/img/irankiu-parduotuve.png" alt="{$shop_name|escape:'htmlall':'UTF-8'}" /> </a> <a href="https://www.irankiuparduotuve.lt/info/kaip-pirkti/#4"> <img style="margin-bottom:10px; position: absolute; top: 13%; left: 23%;" src="https://www.irankiuparduotuve.lt/img/saugu.png" alt="Saugu pirkti!" /> </a> <a href="https://www.irankiuparduotuve.lt/info/kaip-pirkti/#7"> <img style="margin-bottom:10px; position: absolute; top: 13%; left: 31%;" src="https://www.irankiuparduotuve.lt/img/pristatymas.png" alt="Pristatymas visoje Lietuvoje!" /> </a>

这就是网站

的样子

Answer 1

这可能是由于CSS规则写得不好造成的。您的徽标使用position:absolute;定位，这会造成所有麻烦。锚元素<a>静态定位，同时内部图像为position:absolute;。因此，锚元件没有任何高度或宽度，并且不可拆卸。

您可以做的是编辑锚点和图像标记的CSS规则：

<a href="https://www.irankiuparduotuve.lt/info/kaip-pirkti/#7" style="
  z-index: 11; margin-bottom: 10px;
  position: absolute; top: 13%;
  left: 31%; display: inline-block;"> 

<img style="/* margin-bottom:10px; */ /* position: absolute; */
  /* top: 13%; */ /* left: 31%; */
  /* display: inline-block; */" 
src="https://www.irankiuparduotuve.lt/img/pristatymas.png">

</a>

抱歉格式不佳。基本上，您需要将规则应用于<a>元素，而不是<img>

Sėkmės！