Twitter Bootstrap轮播的边框半径在Chrome浏览器上不起作用 [英] Border radius for twitter bootstrap carousel doesn't work on Chrome browser

问题描述

twitter引导轮播的边界半径在Firefox和IE9上工作正常，但在Chrome浏览器上不工作

<style>
.carousel{
    -moz-border-radius: 10px; /* FF1+ */
    -webkit-border-radius: 10px; /* Saf3-4, iOS 1+, Android 1.5+ */
    border-radius: 10px; /* Opera 10.5, IE9, Saf5, Chrome, FF4 */
    overflow:hidden;
}
</style>

<div id="myCarousel" class="carousel slide" >
    <!-- Carousel items -->
    <div class="carousel-inner">
        <div class="active item">
            <img src="img/1.jpg"/>
        </div>
        <div class="item">
            <img src="img/2.jpg"/>
        </div>
        <div class="item">
            <img src="img/3.jpg"/>
        </div>
    </div>
    <!-- Carousel nav -->
    <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
    <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
</div>

推荐答案

我遇到了同样的问题，并解决了 z索引的 .carousel 。

I had the same issue and solved increasing z-index of .carousel.

.carousel{
    -moz-border-radius: 10px; /* FF1+ */
    -webkit-border-radius: 10px; /* Saf3-4, iOS 1+, Android 1.5+ */
    border-radius: 10px; /* Opera 10.5, IE9, Saf5, Chrome, FF4 */
    overflow:hidden;
    z-index: 1000;
}

这篇关于Twitter Bootstrap轮播的边框半径在Chrome浏览器上不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！