Question

我有以下代码。只有部分图像可以点击。

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;
}

问题仅在于镀铬。在mozilla中工作正常。

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

Answer 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>

它适用于我。

Answer 2

如果@ DStruOne的建议没有尝试将display: inline-block添加到您的锚元素中。

a { display: inline-block; }

Answer 3

如果你想触发一个模态，那么可以移动

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

到你的锚标签。在我看来，你不应该在你的图像中添加'.btn'类。尝试将其移动到锚标签。

Answer 4

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

position: relative;
z-index: 100;

只有部分图像可以在chrome中的锚标记内单击

4 个答案: