Bootstrap 3旋轉木馬定位不起作用

我遇到了我爲某個網站創建的旋轉木馬的問題。旋轉木馬是workinglike則必須在所有的瀏覽器我已經測試了除了Mozilla Firefox瀏覽器版本25.0 這裏是發生了什麼事 enter image description here Bootstrap 3旋轉木馬定位不起作用

，如果任何人有過一個simalar問題，我想知道的像他們如何解決它，謝謝這裏是CSS正在使用

/* GLOBAL STYLES 
-------------------------------------------------- */ 
/* Padding below the footer and lighter body text */ 

body { 
padding-bottom: 40px; 
color: #5a5a5a; 
} 



/* CUSTOMIZE THE NAVBAR 
-------------------------------------------------- */ 

/* Special class on .container surrounding .navbar, used for positioning it into place. */ 
.navbar-wrapper { 
position: relative; 
z-index: 15; 
} 


/* CUSTOMIZE THE CAROUSEL 
-------------------------------------------------- */ 

/* Carousel base class */ 
.carousel { 
margin-bottom: 0px; 

/* Negative margin to pull up carousel. 90px is roughly margins and height of navbar. */ 
margin-top: 0px; 
} 
/* Since positioning the image, we need to help out the caption */ 
.carousel-caption { 
z-index: 10; 
} 

/* Declare heights because of positioning of img element */ 
.carousel .item { 
height: 400px; 
margin-top:-10px; 
background-color: #ccc; 
} 
.carousel-inner > .item > img { 
position: absolute; 
top: 0; 
left: 0; 
min-width: 100%; 
height: 400px; 
}

的轉盤

<!-- Carousel================================================== --> 
<div id="Carousel" class="carousel slide"> 
<!-- Indicators --> 
<ol class="carousel-indicators"> 
    <li data-target="#Carousel" data-slide-to="0" class="active"></li> 
    <li data-target="#Carousel" data-slide-to="1"></li> 
    <li data-target="#Carousel" data-slide-to="2"></li> 
</ol> 
<div class="carousel-inner"> 
    <div class="item active"> 
    <img src="images/slide_pics/1.png" alt="First slide"> 
    <div class="container"> 
     <div class="carousel-caption"> 
     <h1>Example headline.</h1> 
     <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> 
     <p><a class="btn btn-large btn-primary" href="#">Sign up today</a></p> 
     </div> 
    </div> 
    </div> 
    <div class="item"> 
    <img src="images/slide_pics/2.jpg" alt="Second slide"> 
    <div class="container"> 
     <div class="carousel-caption"> 
     <h1>Another example headline.</h1> 
     <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> 
     <p><a class="btn btn-large btn-primary" href="#">Learn more</a></p> 
     </div> 
    </div> 
    </div> 
    <div class="item"> 
    <img src="images/slide_pics/3.jpg" alt="Third slide"> 
    <div class="container"> 
     <div class="carousel-caption"> 
     <h1>One more for good measure.</h1> 
     <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> 
     <p><a class="btn btn-large btn-primary" href="#">Browse gallery</a></p> 
     </div> 
    </div> 
    </div> 
</div> 
<a class="left carousel-control" href="#Carousel" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a> 
<a class="right carousel-control" href="#Carousel" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>

這裏的代碼

來源

2013-10-17 foecum

我已經包含了HTML和CSS的 – foecum

真棒，Upvoted作爲這是一個更好的問題;） – MackieeE

隨着你的HTML和CSS，我沒有看到正常的FF和每晚v27.0a1之間的任何區別。其他瀏覽器也沒有。儘管這不是你的截圖。 [Fiddle]（http://jsfiddle.net/ym8Na/） –

不一定是這裏的答案，更多的是一絲調試的...但是當我面對這樣的我當前的CSS後1px的邊框添加到每個項目的問題，但在不同的顏色，即

.navbar-wrapper {1px solid purple;} 
.carousel {border: 1px solid black;} 
.carousel-caption {border: 1px solid yellow;} 
.carousel .item {border: 1px solid blue;} 
.carousel-inner > .item > img {border: 1px solid red;}

一旦完成，你會看到誰是'罪魁禍首' - 你很可能必須指定margin-left：0px;對於那個元素來說，就像Firefox從錯誤的父元素繼承邊界一樣。然後，拿出瘋狂的邊框！

來源

2013-10-18 09:28:22

非常感謝。我從來沒有想過這件事。事實證明，這是左邊界導致Mozilla Firefox 25.0中的問題。 – foecum

我有同樣的問題，我發現問題與旋轉木馬。

.carousel { border: 1px solid black; }

修復了這個問題。

的Firefox 20（蘋果機）引導3.1.1

來源

2014-03-12 04:51:52 sketchthat

我解決了纔剛剛是：

.carousel { 
    border-top: 1px solid #000 
}

來源

2014-10-18 14:32:04

我有同樣的問題，這解決了它。我想知道爲什麼？爲什麼地球上的邊界與一個定位錯誤的元素有什麼關係？ –

該問題在版本41.0.1中仍然存在 – lurker

.carousel { 
    border-top: 1px solid transparent; 
}

來源

2015-10-06 20:12:01

body { 
    overflow-x: hidden; 
}

來源

2016-01-04 06:18:44

Bootstrap 3旋轉木馬定位不起作用

回答

相關問題