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>

更多信息！