我有一个带有图像的自举轮播。在每个图像的内部,右上角都有一个用于垃圾桶的字体真棒图标。在IE中,我可以单击并触发垃圾桶事件,但是在Chrome和Edge中,垃圾桶似乎位于转盘式脚蹼后面。为什么在不同的浏览器中会有所不同,我该如何解决它,以便在所有浏览器中触发垃圾箱可点击事件?

这是我的js fiddle和代码



<div id="profile-carousel" class="carousel slide" data-interval="false" style="width: 225px; height: 225px !important;">
  <div class="carousel-inner" role="listbox">
    @if (hasImage) { for (int i = 0; i
    < imageCount; i++) { var isMainImage=M odel.ProfilePhotoViewModel.YogaProfileImages.ElementAt(i).IsMainImage; <div id=@Model.ProfilePhotoViewModel.YogaProfileImages.ElementAt(i).YogaProfileImageId class="item @(isMainImage == true ? "
      active " : " ") profile-image">
      <img class="img-responsive" style="position: relative; left: 0; top: 0;" src="data:image/jpg;base64, @(Html.Raw(Convert.ToBase64String(Model.ProfilePhotoViewModel.YogaProfileImages.ElementAt(i).ImageThumbnailCropped)))" alt="profile image">
      <i style="z-index: 200; position: absolute; top: 5px; right: 5px; color: whitesmoke;" class="fa fa-trash-o fa-2x"></i>
      <i style="z-index: 200; position: absolute; top: 5px; right: 35px; color: yellow;" class="fa @(isMainImage == true ? " fa-star " : "fa-star-o ") fa-2x"></i>
  </div>
  } } else {
  <div class="item active profile-image">
    <img class="img-responsive" style="position: relative; left: 0; top: 0; border: 1px solid #ddd; border-radius: 6px; border-image: none;" src="~/Images/no_image.jpg" alt="no profile image">
  </div>
  }

</div>

<!-- Controls -->
<a style="visibility: @visible; border-radius: 6px;" class="left carousel-control" href="#profile-carousel" role="button" data-slide="prev">
  <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
  <span class="sr-only">Previous</span>
</a>
<a style="visibility: @visible; border-radius: 6px;" class="right carousel-control " href="#profile-carousel" role="button" data-slide="next">
  <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
  <span class="sr-only">Next</span>
</a>
</div>

最佳答案

我已经更新了您的小提琴,只需添加

top: auto; bottom: 50%;


覆盖这样的轮播控制类样式

<a style="top: auto; bottom: 50%; visibility: visible; border-radius: 6px;" class="left carousel-control" href="#profile-carousel" role="button" data-slide="prev">


检查更新
http://jsfiddle.net/r2wLz6xr/412/

关于javascript - 引导轮播中的图标点击事件未在Chrome中触发,但在IE中正常,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/47086804/

10-12 12:53
查看更多