我有一个带有图像的自举轮播。在每个图像的内部,右上角都有一个用于垃圾桶的字体真棒图标。在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/