HTML中图片周围的超链接，但在浏览器中不可点击

Question

http://starterpad.com/blog/

<div id="logo">
    <a href="http://starterpad.com/blog/"><img src="http://starterpad.com/blog/wp-content/uploads/2014/11/copy-StarterPad-logo-new.png" height="61" width="321" alt="StarterPad Blog"></a>
</div>

如您所见，徽标的<img>标签周围有一个<a href>标签。 但是在浏览器（尝试了几次）中，徽标图像不可单击。

任何想法为什么不呢？

Answer 1

那是因为另一个div在上面。 这家伙

<div class="collapse navbar-collapse navbar-ex1-collapse">...</div>

它与“ display：table;”有关。 在6555行的bootstrap.min.css中设置样式。如果关闭该属性，则div会变小并停止覆盖徽标。

Answer 2

看起来div导航栏位于图像上方，因此当鼠标实际上位于导航栏上方时。 将“ pull-right”类添加到导航栏，它应该可以修复它。

<div class="collapse navbar-collapse navbar-ex1-collapse pull-right"></div> 

Answer 3

就像我在jsfiddle中尝试时一样，它是可点击的，这意味着某层重叠了您的链接，因此它是不可点击的。

以下是与徽标div重叠的层。

<div class="collapse navbar-collapse navbar-ex1-collapse">
</div>

因此，第一个解决方法是上述所有ppl都提到的内容，使用“ pull-right”内置类或具有较高差值的CSS来重新对齐这些层以避免重叠。

另一种修复方法是使用z-index。 我建议您添加以下属性以将其设置为顶部，以便单击

<div class="navbar-header" style="position: relative;z-index: 1;"> 

.........

Answer 4

原来，这个WP插件是罪魁祸首： https ： //wordpress.org/plugins/contact-bank/

停用它可以解决问题。