1.7. Compatibilidad con los navegadores

Bootstrap ha sido pensado para utilizarse en las versiones más recientes de los navegadores de escritorio y navegadores móviles. Aunque también funciona con los navegadores más 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 más recientes de los siguientes navegadores y plataformas:

Bootstrap también debería funcionar bien en Chromium (Linux) y Internet Explorer 7 (Windows), aunque no están soportados oficialmente.

1.7.2. Internet Explorer 8 y 9

Los navegadores Internet Explorer 8 y 9 también están soportados, pero debes tener en cuenta que muchas propiedades de CSS3 y elementos de HTML5 no funcionan en estos navegadores. Además, Internet Explorer 8 requiere el uso de la librería respond.js para que el diseño web responsive funcione bien.

Visita el sitio web Can I use... obtener más información 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 configuraciones adicionales, tal y como se explica en la documentación de Respond.js.

1.7.3.2.  Respond.js y file://

Debido a las restricciones de seguridad, Respond.js no funciona cuando ves las páginas 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, asegúrate de ver la página a través del protocolo http:// o https://. Lee la documentación de Respond.js para obtener más detalles.

1.7.3.3. Respond.js y @import

Respond.js no funciona con el código CSS importado mediante la directiva @import, lo que es común en algunas configuraciones de Drupal. Lee la documentación de Respond.js para obtener más detalles.

1.7.3.4. Internet Explorer 8 y el modelo de cajas

Internet Explorer 8 no soporta completamente la propiedad box-sizing: border-box; cuando se combina con min-width, max-width, min-height o max-height. Por ese motivo, a partir de la versión 3.0.1 Bootstrap ya no utiliza la propiedad max-width en los elementos .containers.

1.7.4. Comentarios sobre la compatibilidad con Internet Explorer

Bootstrap no funciona con los modos de compatibilidad antiguos de Internet Explorer. Para asegurarte de que utilizas el modo correcto, puedes añadir la siguiente etiqueta <meta> en todas tus páginas, ya que activa el modo más avanzado que esté disponible en tu navegador Internet Explorer:

<meta http-equiv="X-UA-Compatible" content="IE=edge">

Confirma que Internet Explorer está utilizando el modo correcto pulsando la tecla F12 y comprobando el valor de la opción "Document Mode".

Esta etiqueta HTML se incluye en toda la documentación y todos los ejemplos de Bootstrap para que se muestren lo mejor posible en cada versión de Internet Explorer.

Puedes obtener más información sobre este tema en la siguiente pregunta de StackOverflow.

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 solución es tan sencilla como añadir la siguiente regla CSS:

@-ms-viewport       { width: device-width; }

Lamentablemente esta solución no funciona con algunas versiones de Windows Phone 8. Por eso es necesario utilizar el siguiente código CSS y JavaScript:

@-webkit-viewport   { width: device-width; }
@-moz-viewport      { width: device-width; }
@-ms-viewport       { width: device-width; }
@-o-viewport        { width: device-width; }
@viewport           { width: device-width; }

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

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

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

1.7.6. Errores de redondeo de Safari

El motor de las versiones más recientes de Safari para Mac OS X tiene un error de redondeo que afecta a las clases .col-*-1 utilizadas en los diseños basados en rejilla. La consecuencia es que si tienes una fila con 12 columnas individuales, verás que su anchura total se queda un poco corta comparada con las otras filas. Hasta que Apple no solucione este problema, lo que puedes hacer es:

• Añadir la clase .pull-right a la última columna de la fila para que se vea alineada con las columnas de las otras filas.
• Ajustar a mano los porcentajes para que Safari no cometa el error al redondear su valor (obviamente esta solución es mucho más difícil que la anterior).

1.7.7. Elementos modales, barras de navegación 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, verás que el resto de contenidos del <body> también hacen scroll.

Por otra parte, si utilizas elementos <input> en tu elemento modal, los dispositivos iOS tienen un error que impide actualizar la posición 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 posición 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 solución.

Por último, la propiedad .dropdown-backdrop 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 navegación es necesario pinchar directamente en el elemento desplegable.

1.7.8.  Los problemas con el zoom del navegador

Cuando haces zoom en una página, es normal que se produzcan pequeños fallos en algunos componentes, tanto en Bootstrap como en cualquier otra librería o framework CSS. En principio no es posible corregir ninguno de estos errores, ya que depende más de los propios navegadores de los dispositivos.

1.7.9. Los estilos para impresora

El soporte para imprimir páginas es bastante mejorable incluso en los navegadores más modernos. Google Chrome por ejemplo ignora los márgenes y utiliza su propio viewport al imprimir las páginas. Esto puede hacer que se active la rejilla ultra-pequeña de Bootstrap al imprimir una página. Para evitar estos problemas:

• Haz que tu página se vea bien con la rejilla ultra-pequeña.
• Modifica el valor de las variables @screen-* de Less para que el papel de tu impresora se considere más grande que el tamaño ultra-pequeño.
• Añade media queries propias para modificar 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 más 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 más graves es que Android no muestra los controles laterales cuando un elemento <select> utiliza la propiedad border-radius o border. Para evitarlo puedes utilizar el siguiente código que muestra los elementos <select> sin estilo cuando la página se ve en un dispositivo Android:

<script>
var nua = navigator.userAgent;
var isAndroid = (nua.indexOf('Mozilla/5.0') > -1 && nua.indexOf('Android ') > -1 && nua.indexOf('AppleWebKit') > -1 && nua.indexOf('Chrome') === -1);
if (isAndroid) {
  $('select.form-control').removeClass('form-control').css('width', '100%');
}
</script>

Third party support

Bootstrap no soporta oficialmente ningún plugin o añadido 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 conflicto que produce la regla * { box-sizing: border-box; }, que se utiliza para evitar que el padding se tenga en cuenta al calcular el tamaño de un elemento.

Dependiendo de tu proyecto, la solución puede consistir en redefinir esta propiedad para un elemento (opción 1) o para toda una región (opción 2).

/* Box-sizing resets
 *
 * Reset individual elements or override regions to avoid conflicts due to
 * global box model settings of Bootstrap. Two options, individual overrides and
 * region resets, are available as plain CSS and uncompiled Less formats.
 */

/* Opción 1A: redefinir el modelo de cajas de un elemento mediante CSS */
.element {
  -webkit-box-sizing: content-box;
     -moz-box-sizing: content-box;
          box-sizing: content-box;
}

/* Opción 1B: redefinir el modelo de cajas de un elemento mediante los mixin de Bootstrap */
.element {
  .box-sizing(content-box);
}

/* Opción 2A: resetear el modelo de cajas de una región entera mediante CSS */
.reset-box-sizing,
.reset-box-sizing *,
.reset-box-sizing *:before,
.reset-box-sizing *:after {
  -webkit-box-sizing: content-box;
     -moz-box-sizing: content-box;
          box-sizing: content-box;
}

/* Opción 2B: resetear el modelo de cajas de una región entera mediante los mixin de Bootstrap */
.reset-box-sizing {
  &,
  *,
  *:before,
  *:after {
    .box-sizing(content-box);
  }
}
.element {
  .reset-box-sizing();
}