在 chrome 的锚标记内只有部分 img 是可点击的答案

【问题标题】：Only part of img is clickable inside an anchor tag in chrome在 chrome 的锚标记内只有部分 img 是可点击的
【发布时间】：2019-05-31 14:34:18
【问题描述】：

我有以下代码。图片只有一部分是可点击的。

HTML

<div class="row">
  <div class="col-md-4 text-center">
    <div class="portfolio-item">
      <a>
        <img class="btn img-portfolio project-img-responsive" data-toggle="modal" data-target="#project-modal" src="img/map_image.jpg">
      </a>
    </div>
  </div>
</div>

CSS

.btn -> bootstrap CSS class
.row -> bootstrap CSS class
.col-md-4 -> bootstrap CSS class
.text-center -> bootstrap CSS class
.img-portfolio {
  margin: 0 auto;
}

.project-img-responsive {
    display: block;
    max-width: 50%;
    height: auto;
}
.portfolio-item {
  margin-bottom: 25px;
}

问题仅在于 chrome。在 Mozilla 中运行良好。

我错过或弄错了哪些属性？

【问题讨论】：

你的代码对我有用吗？看看jsfiddle.net/Tr4him/ucdL3
你能在JSFiddle中复制这个问题吗？

标签： html css twitter-bootstrap responsive-design

【解决方案1】：

你好尝试添加属性Href

<a href="#" >
    <img class="btn img-portfolio project-img-responsive" data-toggle="modal" data-target="#project-modal" src="img/map_image.jpg">
</a>

它对我有用。

【讨论】：

是的。不工作。我真的怀疑 href 属性是否会对此产生任何影响。

【解决方案2】：

如果@DStruOne 的建议不起作用，请尝试将display: inline-block 添加到您的锚元素。

a { display: inline-block; }

【讨论】：

我已经尝试将锚标记的显示更改为“inline-block”.. 没有帮助。

【解决方案3】：

如果你想触发一个模态，那么也许移动

data-toggle="modal" data-target="#project-modal"

到您的锚标记。在我看来，您不应该在图像中添加“.btn”类。尝试将其也移动到锚标记。

【讨论】：

将它们移动到锚标记也没有帮助。
我试图重现这个问题并创建了 Fiddle jsfiddle.net/YFSW2 是吗，你想要完成什么？
我刚刚注意到。问题仅在于铬。在 Mozilla 中运行良好。
尝试使用 W3C 验证器 (validator.w3.org/#validate_by_input) 验证您的标记，可能存在一些 HTML 问题？

【解决方案4】：

鉴于 JS 小提琴工作正常，我怀疑页面上的另一个（不可见）元素与您的图像重叠。我设法通过设置<a> 标签的 z-index 和位置（因为第一个将无法工作没有第二个）来解决类似的问题...

position: relative;
z-index: 100;

【讨论】：