Bootstrap se renderiza diferente en Firefox y Chrome

[Ainvar59]

Tengo este codigo:

<div class="container-fluid">
<div class="row">
<div class="col-md-10 col-md-offset-1 col-lg-10 col-lg-offset-1" id="cuerpo">
<header class=" col-md-12 col-xs-12 col-sm-12" id="cabecera">
<img class="img-responsive" src= "http://lorempixel.com/870/150/city/" width="120%" height="auto" alt="cabecera">
<div class="contenido">
<h1> Xxxxxxxxxxx</h1>
<h3>Laboratorio de anaplatología</h3>
</div>
</header>

En firefox no me renderiza los layout y me pone todo a pantalla completa. En Chrome me deja el offset a 1 y respeta los 10 del layout.

Estoy trabajando en local y no sé como subir las capturas de pantalla.

Gracias.

[devpantro]

Puedes usar una alternativa a esto, usa [URL="https://necolas.github.io/normalize.css/"]normalize[/URL] ayuda que se vean iguales las propieades en cualquier navegador.

slds

[Ainvar59]

Gracias, pero Bootstrap es una libreria/framework que ya está optimizada para todos los navegadores.
Es otra cosa pero no logro encontrar la respuesta.

[JustinKO]

Hola, no sé si esto va a solucionar tu problema. Obviamente estás haciendo algo mal, bootstrap está optimizadísimo para que funcione en todos los navegadores.
Lo primero decirte que no estaría de más saber dónde se cierran esos tres primeros divs para saber un poco mejor cuál es tu intención con el código.
Solo como apunte, si pones un:

Código HTML:

<div class="col-md-10 col-md-offset-1 col-lg-10 col-lg-offset-1" id="cuerpo">
 

bootstrap es mobile first, al haber definido el md, te sobra definir el lg si lo que vas a definir es lo mismo. esto no cambia nada pero es una cuestión de estilo y ahorrar código. Lo correcto sería así:

Código HTML:

<div class="col-md-10 col-md-offset-1 " id="cuerpo">
 

El lg lo hereda del md.
Otra cosa, en el header te sobra definir esas 12 columnas ya que al ser elemento de bloque te coge todo el ancho. Y te digo lo mismo, si hubiera sido necesario, al ser todos 12, con que definas el más pequeño, o sea el sm en este caso. sería suficiente.
Yo ese código lo hubiera puesto así:

Código HTML:

<div class="container-fluid">
    <div class="row">
        <div class="col-md-10 col-md-offset-1" id="cuerpo">
            <header id="cabecera">
                <img class="img-responsive" src= "http://lorempixel.com/870/150/city/" width="120%" height="auto" alt="cabecera">
                <div class="contenido"> 
                    <h1> Xxxxxxxxxxx</h1>
                    <h3>Laboratorio de anaplatología</h3>
                </div> 
            </header>
        </div>
    </div>
</div>
 

Eso sí, si en el header, en vez de poner col-loquesea-12 quisiera poner un col-loquesea-10, por ejemplo, metería otro row para que funcionara correctamente. algo así:

Código HTML:

<div class="container-fluid">
    <div class="row">
        <div class="col-md-10 col-md-offset-1" id="cuerpo">
            <div class="row">
                <header  class="col-md-6 col-md-offset-3" id="cabecera"> <!-- Esto es solo un ejemplo -->
                    <img class="img-responsive" src= "http://lorempixel.com/870/150/city/" width="120%" height="auto" alt="cabecera">
                    <div class="contenido"> 
                        <h1> Xxxxxxxxxxx</h1>
                        <h3>Laboratorio de anaplatología</h3>
                    </div> 
                </header>
            </div>  
        </div>
    </div>
</div>
 

No sé si va a solucionar tu problema, de todos modos es la manera correcta, si te falla, el problema lo tienes en otra parte del código.

un saludo

[JustinKO]

Por cierto, ahora volviendo a revisar tu código, ese width="120%" ¿para qué es?
ahí, como no tengas definido en CSS el overflow: hidden, obviamente te va a sobresalir por los lados y te va a hacer un extraño ¿no?
¿para qué está en 120%?

Al definir img-responsive, te ajusta la foto al ancho del contenedor, sobra ponerle ancho y alto a la imagen, y más ese 120%.