3

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

2 に答える 2

6

私は同じ問題を抱えていて、の増加z-indexを解決し.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;
}
于 2016-03-01T10:45:59.040 に答える
1

同じ問題があります。これは、カルーセル コントロール (次/前の画像を見るためのコントロール パネル) によるものでした。私はこれを持っていて、私にとってはうまく機能します:-)

.carousel img{ border-radius: 55px; }
.carousel-control { background-image:none !important; }
于 2015-05-13T19:27:14.643 に答える