8/10/2016

1.7.Compatibilidadconlosnavegadores(Bootstrap3,elmanualoficial)

Ver ndice de contenidos del libro

1.7. Compatibilidad con los navegadores

Bootstrap ha sido pensado para utilizarse en las versiones ms recientes de los navegadores de
escritorio y navegadores mviles. Aunque tambin funciona con los navegadores ms antiguos,
en estos casos es posible que algunos componentes se vean peor de lo esperado.

1.7.1. Navegadores soportados

Concretamente, Bootstrap soporta las versiones ms recientes de los siguientes navegadores y
plataformas:
Chrome

Firefox

Internet Explorer

Opera

Safari

Android

iOS

Mac OS X

Windows

Bootstrap tambin debera funcionar bien en Chromium (Linux) y Internet Explorer 7

(Windows), aunque no estn soportados oHcialmente.

1.7.2. Internet Explorer 8 y 9

Los navegadores Internet Explorer 8 y 9 tambin estn soportados, pero debes tener en cuenta
que muchas propiedades de CSS3 y elementos de HTML5 no funcionan en estos navegadores.
Adems, Internet Explorer 8 requiere el uso de la librera respond.js
(https://github.com/scottjehl/Respond) para que el diseo web responsive funcione bien.
Funcionalidad

Internet Explorer 8

Internet Explorer 9

borderradius

No soportado

Soportado

boxshadow

No soportado

Soportado

transform

No soportado

Soportado con el preHjo ms

http://librosweb.es/libro/bootstrap_3/capitulo_1/compatibilidad_con_los_navegadores.html

1/9

8/10/2016

1.7.Compatibilidadconlosnavegadores(Bootstrap3,elmanualoficial)

Funcionalidad

Internet Explorer 8

Internet Explorer 9

transition

No soportado

No soportado

placeholder

No soportado

No soportado

Visita el sitio web Can I use... (http://caniuse.com/) obtener ms informacin sobre el soporte
de todas las propiedades de CSS3 y HTML5 en cada navegador.

1.7.3. Internet Explorer 8 y Respond.js

Cuando utilices Respond.js con Internet Explorer 8, debes tener en cuenta las siguientes
limitaciones.
1.7.3.1. Respond.js y el CSS alojado en otro dominio
Si utilizas archivos CSS alojados en dominios o subdominios diferentes al utilizado para enlazar
Respond.js (por ejemplo porque usas una CDN) entonces debes realizar ciertas conHguraciones

adicionales, tal y como se explica en la documentacin de Respond.js

(https://github.com/scottjehl/Respond/blob/master/README.md#cdnx-domain-setup).
1.7.3.2. Respond.js y Hle://
Debido a las restricciones de seguridad, Respond.js no funciona cuando ves las pginas
localmente en tu propio navegador mediante el protocolo file:// (por ejemplo al pinchar dos
veces sobre un archivo HTML de tu ordenador). Para probar las funcionalidades responsive en
Internet Explorer 8, asegrate de ver la pgina a travs del protocolo http:// o https:// . Lee la
documentacin de Respond.js
(https://github.com/scottjehl/Respond/blob/master/README.md#cdnx-domain-setup) para
obtener ms detalles.
1.7.3.3. Respond.js y @import
Respond.js no funciona con el cdigo CSS importado mediante la directiva @import , lo que es

comn en algunas conHguraciones de Drupal. Lee la documentacin de Respond.js

(https://github.com/scottjehl/Respond/blob/master/README.md#cdnx-domain-setup) para
obtener ms detalles.
1.7.3.4. Internet Explorer 8 y el modelo de cajas
Internet Explorer 8 no soporta completamente la propiedad boxsizing:borderbox; cuando
se combina con minwidth , maxwidth , minheight o maxheight . Por ese motivo, a partir de la
versin 3.0.1 Bootstrap ya no utiliza la propiedad maxwidth en los elementos .containers .

1.7.4. Comentarios sobre la compatibilidad con Internet Explorer

http://librosweb.es/libro/bootstrap_3/capitulo_1/compatibilidad_con_los_navegadores.html

2/9

8/10/2016

1.7.Compatibilidadconlosnavegadores(Bootstrap3,elmanualoficial)

Bootstrap no funciona con los modos de compatibilidad antiguos de Internet Explorer. Para
asegurarte de que utilizas el modo correcto, puedes aadir la siguiente etiqueta <meta> en
todas tus pginas, ya que activa el modo ms avanzado que est disponible en tu navegador
Internet Explorer:
<metahttpequiv="XUACompatible"content="IE=edge">

ConHrma que Internet Explorer est utilizando el modo correcto pulsando la tecla F12 y
comprobando el valor de la opcin "Document Mode".
Esta etiqueta HTML se incluye en toda la documentacin y todos los ejemplos de Bootstrap
para que se muestren lo mejor posible en cada versin de Internet Explorer.
Puedes obtener ms informacin sobre este tema en la siguiente pregunta de StackOverow
(http://stackoverow.com/questions/6771258/whats-the-dierence-if-meta-http-equiv-x-uacompatible-content-ie-edge).

1.7.5. Windows Phone 8 y Internet Explorer 10

Internet Explorer 10 no distingue entre la anchura del dispositivo y la anchura del viewport, por
lo que no aplica correctamente las media queries del CSS de Bootstrap. Normalmente la
solucin es tan sencilla como aadir la siguiente regla CSS:
@msviewport{width:devicewidth;}

Lamentablemente esta solucin no funciona con algunas versiones de Windows Phone 8. Por
eso es necesario utilizar el siguiente cdigo CSS y JavaScript:
@webkitviewport{width:devicewidth;}
@mozviewport{width:devicewidth;}
@msviewport{width:devicewidth;}
@oviewport{width:devicewidth;}
@viewport{width:devicewidth;}

http://librosweb.es/libro/bootstrap_3/capitulo_1/compatibilidad_con_los_navegadores.html

3/9

8/10/2016

1.7.Compatibilidadconlosnavegadores(Bootstrap3,elmanualoficial)

if(navigator.userAgent.match(/IEMobile\/10\.0/)){
varmsViewportStyle=document.createElement("style")

msViewportStyle.appendChild(
document.createTextNode(
"@msviewport{width:auto!important}"
)
)

document.getElementsByTagName("head")[0].appendChild(msViewportStyle)
}

1.7.6. Errores de redondeo de Safari

El motor de las versiones ms recientes de Safari para Mac OS X tiene un error de redondeo
que afecta a las clases .col*1 utilizadas en los diseos basados en rejilla. La consecuencia es
que si tienes una Hla con 12 columnas individuales, vers que su anchura total se queda un
poco corta comparada con las otras Hlas. Hasta que Apple no solucione este problema, lo que
puedes hacer es:
Aadir la clase .pullright a la ltima columna de la Hla para que se vea alineada con las
columnas de las otras Hlas.
Ajustar a mano los porcentajes para que Safari no cometa el error al redondear su valor
(obviamente esta solucin es mucho ms difcil que la anterior).

1.7.7. Elementos modales, barras de navegacin y teclados virtuales

Los dispositivos Android y iOS tienen un soporte bastante limitado para la propiedad overflow:
hidden aplicada sobre el elemento <body> . As que si haces scroll por arriba o por debajo del
elemento modal, vers que el resto de contenidos del <body> tambin hacen scroll.
Por otra parte, si utilizas elementos <input> en tu elemento modal, los dispositivos iOS tienen
un error que impide actualizar la posicin de esos elementos cuando se muestra el teclado
virtual. Como soluciones puedes aplicar el estilo position:absolute a esos elementos o
puedes programar un evento para corregir la posicin del elemento a mano cuando se muestre
el teclado. En cualquier caso, Bootstrap no hace nada por solucionar estos errores y por tanto,
es tu responsabilidad elegir la mejor solucin.
Por ltimo, la propiedad .dropdownbackdrop no se utiliza en el elemento <nav> en iOS debido a
la complejidad para superponer correctamente las capas. Por tanto, para cerrar los elementos
desplegables en las barras de navegacin es necesario pinchar directamente en el elemento
desplegable.

1.7.8. Los problemas con el zoom del navegador

http://librosweb.es/libro/bootstrap_3/capitulo_1/compatibilidad_con_los_navegadores.html

4/9

8/10/2016

1.7.Compatibilidadconlosnavegadores(Bootstrap3,elmanualoficial)

1.7.8. Los problemas con el zoom del navegador

Cuando haces zoom en una pgina, es normal que se produzcan pequeos fallos en algunos
componentes, tanto en Bootstrap como en cualquier otra librera o framework CSS. En principio
no es posible corregir ninguno de estos errores, ya que depende ms de los propios
navegadores de los dispositivos.

1.7.9. Los estilos para impresora

El soporte para imprimir pginas es bastante mejorable incluso en los navegadores ms
modernos. Google Chrome por ejemplo ignora los mrgenes y utiliza su propio viewport al
imprimir las pginas. Esto puede hacer que se active la rejilla ultra-pequea de Bootstrap al
imprimir una pgina. Para evitar estos problemas:
Haz que tu pgina se vea bien con la rejilla ultra-pequea.
ModiHca el valor de las variables @screen* de Less para que el papel de tu impresora se
considere ms grande que el tamao ultra-pequeo.
Aade media queries propias para modiHcar los puntos de ruptura de la rejilla solamente para
el medio print .

1.7.10. El navegador por defecto de Android

EL navegador por defecto de Android 4.1 y de algunas versiones ms recientes es diferente a
Google Chrome. Lamentablemente, este navegador por defecto est lleno de errores y de
inconsistencias en el tratamiento de CSS.
Uno de los errores ms graves es que Android no muestra los controles laterales cuando un
elemento <select> utiliza la propiedad borderradius o border . Para evitarlo puedes utilizar el
siguiente cdigo que muestra los elementos <select> sin estilo cuando la pgina se ve en un
dispositivo Android:
<script>
varnua=navigator.userAgent;
varisAndroid=(nua.indexOf('Mozilla/5.0')>1&&nua.indexOf('Android')>1&&nua.in
dexOf('AppleWebKit')>1&&nua.indexOf('Chrome')===1);
if(isAndroid){
$('select.formcontrol').removeClass('formcontrol').css('width','100%');
}
</script>

Third party support

http://librosweb.es/libro/bootstrap_3/capitulo_1/compatibilidad_con_los_navegadores.html

5/9

8/10/2016

1.7.Compatibilidadconlosnavegadores(Bootstrap3,elmanualoficial)

Bootstrap no soporta oHcialmente ningn plugin o aadido desarrollado por terceros, pero s
que podemos ofrecerte algunos consejos para evitar problemas en tus proyectos

1.7.11. El modelo de cajas

Algunas aplicaciones desarrolladas por terceros, como por ejemplo Google Maps o Google
Custom Search Engine, no funcionan bien con Bootstrap debido al conicto que produce la
regla *{boxsizing:borderbox;} , que se utiliza para evitar que el padding se tenga en
cuenta al calcular el tamao de un elemento.
Dependiendo de tu proyecto, la solucin puede consistir en redeHnir esta propiedad para un
elemento (opcin 1) o para toda una regin (opcin 2).

http://librosweb.es/libro/bootstrap_3/capitulo_1/compatibilidad_con_los_navegadores.html

6/9

8/10/2016

1.7.Compatibilidadconlosnavegadores(Bootstrap3,elmanualoficial)

/*Boxsizingresets
*
*Resetindividualelementsoroverrideregionstoavoidconflictsdueto
*globalboxmodelsettingsofBootstrap.Twooptions,individualoverridesand
*regionresets,areavailableasplainCSSanduncompiledLessformats.
*/

/*Opcin1A:redefinirelmodelodecajasdeunelementomedianteCSS*/
.element{
webkitboxsizing:contentbox;
mozboxsizing:contentbox;
boxsizing:contentbox;
}

/*Opcin1B:redefinirelmodelodecajasdeunelementomediantelosmixindeBootstrap
*/
.element{
.boxsizing(contentbox);
}

/*Opcin2A:resetearelmodelodecajasdeunareginenteramedianteCSS*/
.resetboxsizing,
.resetboxsizing*,
.resetboxsizing*:before,
.resetboxsizing*:after{
webkitboxsizing:contentbox;
mozboxsizing:contentbox;
boxsizing:contentbox;
}

/*Opcin2B:resetearelmodelodecajasdeunareginenteramediantelosmixindeBoots
trap*/
.resetboxsizing{
&,
*,
*:before,
*:after{
.boxsizing(contentbox);
}
}
.element{
http://librosweb.es/libro/bootstrap_3/capitulo_1/compatibilidad_con_los_navegadores.html

7/9

8/10/2016

1.7.Compatibilidadconlosnavegadores(Bootstrap3,elmanualoficial)

.resetboxsizing();
}

Anterior

Siguiente

1.6. Actualizacin de Bootstrap 2.X a 3.0

1.8. Accesibilidad

(../capitulo_1/actualizacion_de_bootstrap_2x_a_30.html)
(../capitulo_1/accesibilidad.html)

INDICE DE CONTENIDOS
Captulo 1. Primeros pasos (../capitulo_1.html)
1.2. Contenidos de Bootstrap (../capitulo_1/contenidos_de_bootstrap.html)
1.3. La primera plantilla Bootstrap (../capitulo_1/la_primera_plantilla_bootstrap.html)
1.4. La comunidad Bootstrap (../capitulo_1/la_comunidad_bootstrap.html)
1.5. Desactivando el diseo responsive (../capitulo_1/desactivando_el_diseno_responsive.html)
1.6. Actualizacin de Bootstrap 2.X a 3.0 (../capitulo_1/actualizacion_de_bootstrap_2x_a_30.html)
1.7. Compatibilidad con los navegadores (../capitulo_1/compatibilidad_con_los_navegadores.html)
1.8. Accesibilidad (../capitulo_1/accesibilidad.html)
1.9. La licencia de Bootstrap (../capitulo_1/la_licencia_de_bootstrap.html)
1.10. Personalizando Bootstrap (../capitulo_1/personalizando_bootstrap.html)
2. Diseando con rejilla (../capitulo_2.html)
3. Tipografa (../capitulo_3.html)
4. Elementos CSS (../capitulo_4.html)
5. Formularios (../capitulo_5.html)
6. Componentes (../capitulo_6.html)
7. Plugins de JavaScript (../capitulo_7.html)

2006-2016 LibrosWeb.es Contacto (/sitio/contacto)

(/sitio/condiciones)

Novedades (https://plus.google.com/+librosweb)

Condiciones

Privacidad (/sitio/privacidad)

http://librosweb.es/libro/bootstrap_3/capitulo_1/compatibilidad_con_los_navegadores.html

3.588

8/9

8/10/2016

1.7.Compatibilidadconlosnavegadores(Bootstrap3,elmanualoficial)

3.588

das online

http://librosweb.es/libro/bootstrap_3/capitulo_1/compatibilidad_con_los_navegadores.html

9/9