Bootstrap 3 carosello Posizionamento non funzionante

Question

Ho riscontrato un problema con il carousel che ho creato per un determinato sito Web. la giostra è workinglike DEVE in tutti i browser che ho testato su tranne che per Mozilla Firefox versione 25.0 Ecco un'immagine di ciò che sta accadendo

se qualcuno ha mai avuto un problema simalar vorrei sapere come hanno risolto, grazie ecco il codice per il carosello

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

Ecco il css sto usando

/* 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

Non necessariamente una risposta qui, più di un pizzico di debug ... ma quando sono di fronte a problemi come questo mi aggiungere un bordo 1px per ogni voce dopo il CSS corrente, ma in un colore diverso cioè

.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;} 

Una volta terminato, vedrai chi è il "colpevole" - molto probabilmente dovrai specificare margin-left: 0px; per quell'elemento, come sembra che Firefox stia ereditando il margine da un elemento genitore in errore. Quindi tira fuori i confini pazzi!

Answer 2

Ho avuto lo stesso problema, ho trovato il problema con il carosello.

.carousel { border: 1px solid black; } 

risolto il problema.

Firefox 20 (Mac) Bootstrap 3.1.1

Answer 3

ho risolto con appena esso:

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

Answer 4

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

Answer 5

body { 
    overflow-x: hidden; 
}