超链接图像周围的HTML，但在浏览器

http://starterpad.com/blog/超链接图像周围的HTML，但在浏览器

<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>标签。但在浏览器中（尝试了几次），徽标图像不可点击。

任何想法为什么不呢？

来源

2014-11-06 Kane

看起来您所发布的代码没有问题：http://jsfiddle.net/vjs14ytr/ – hoverbikes 2014-11-06 02:23:31

这只是WP网站的代码片段，链接位于我的帖子的顶部。 – Kane 2014-11-06 04:27:38

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

停用它解决了这一问题。

来源

2014-11-06 02:38:17 Kane

它是可点击的，因为当我在jsfiddle中尝试它时，这意味着某些图层重叠了您的链接，因此它不可点击。

下面是与您的标志div重叠的图层。

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

所以第一修复是所有上述脂肪酶已经提到的，使用“右拉”集结类或在具有更高piority重新调整这些层，以避免重叠的CSS。

另一个修复方法是使用z-index。我会建议ü下面添加属性，将其设置为顶部，它的点击

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

.........

来源

2014-11-06 02:21:09 BOBO

这是因为其他分区是在它的上面。这家伙

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

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

来源

2014-11-06 02:21:19 Sergey

看来，这个div可以完全删除。 – misterManSam 2014-11-06 02:31:27

看起来像你的div导航栏在图像上，所以当你的鼠标实际上在导航栏上。添加“拉右”类到您的导航栏，它应该修复它。

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

来源

2014-11-06 02:24:06 amamut

请注意，根据[Bootstrap组件页面]（http://getbootstrap.com/components/#dropdowns-alignment），自v3.1.0开始已弃用'pull-right'对齐方式。无论如何，这个div似乎可以在这个例子中被彻底删除。 – misterManSam 2014-11-06 02:34:29

如果您阅读了评论，他们会说只有在下拉菜单中：“从v3.1.0开始，我们已经在下拉菜单中弃用了.pull-right。”他们还表示，v3.1.0中存在快速浮动，它利用了右拉和左拉类：http://getbootstrap.com/css/#helper-classes-floats – amamut 2014-11-06 02:39:19

我对Bootstrap不够了解，对于某些。那么这在技术上不适用？ “ ”不适用于navbars。要将navbars中的组件与实用程序类对齐，请使用.navbar-left或.navbar-right。有关详细信息，请参阅navbar文档。或者是导航项目本身？ – misterManSam 2014-11-06 02:49:22

超链接图像周围的HTML，但在浏览器

回答

相关问题