Bootstrap 3 carousel定位不起作用

Question

我在為某個網站創建的旋轉木馬有問題。 旋轉木馬就像它在我測試過的所有瀏覽器中一樣工作，除了Mozilla firefox版本25.0這是一個正在發生的事情的圖像

如果有人曾經有過simalar問題我想知道他們是如何解決它的，謝謝這里是旋轉木馬的代碼

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

這是我正在使用的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;
}

Answer 1

這里不一定是答案，更多是調試提示......但是當我遇到這樣的問題時，我會在你當前的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正在從錯誤的父元素繼承邊距。 然后拿出瘋狂的邊界吧！

Answer 2

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

.carousel { border: 1px solid black; }

修復了這個問題。

Firefox 20（Mac）Bootstrap 3.1.1

Answer 3

我只解決了它：

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

Answer 4

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

Answer 5

body {
    overflow-x: hidden;
}