usar pagina navegadores internet framework desde curso crear con completo compatibilidad como cero bootstrap twitter-bootstrap internet-explorer-8 responsive-design media-queries fluid-layout

twitter bootstrap - pagina - Cómo hacer que el diseño responsivo de Bootstrap funcione en IE8



curso completo de bootstrap desde cero 1 (10)

Aquí hay una solución en la que he estado trabajando que funciona con el marco Bones. Se podría usar muy fácilmente con bootstrap.

https://github.com/gamsim/ieresponsify

He estado buscando por un tiempo y encontré que algunas personas lo hicieron funcionar, pero ninguno de ellos proporcionó ningún ejemplo de código.

Intenté sus sugerencias pero no funcionó para mí. Por sugerencias, intenté agregar <meta http-equiv="X-UA-Compatible" content="IE=edge" /> , css3-mediaqueries-js o css3-mediaqueries-js , pero ninguno de ellos ayudó.

Aquí hay un jsfiddle , si lo ves con IE8, verás que a y b están en la misma fila, independientemente del ancho de tu navegador.

Pero si ve con Chrome, FF o IE9 o superior, los verá en filas diferentes o en una sola fila, según el ancho del navegador.

ACTUALIZAR

Intenté descomentar uno de ellos (css3-mediaquery, html5shiv y responder) a la vez, pero no tuve suerte con ninguno de ellos.

<!DOCTYPE html> <html lang="en"> <head> <title></title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/latest/css/bootstrap-combined.min.css" rel="stylesheet"> </head> <body> <div class="container"> <div class="row"> <div class="span4"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </div> <div class="span8"> LOREM IPSUM DOLOR SIT AMET, CONSECTETUR ADIPISCING ELIT. </div> </div> </div> <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript" src="http://netdna.bootstrapcdn.com/twitter-bootstrap/latest/js/bootstrap.min.js"></script> <%--<script type="text/javascript" src="js/css3-mediaqueries.js"></script>--%> <%--<script type="text/javascript" src="js/html5shiv.js"></script>--%> <%--<script type="text/javascript" src="js/respond.js"></script>--%> </script> </body> </html>

El problema con las cargas de css de dominio cruzado en IE 8 se resolvió según lo sugerido por @Akshay Raje y @Craig London .

Solo para agregarlo, respon.js o respond.min.js deben agregarse antes de respond.proxy.js para que la configuración funcione.

Intente o siga esto después de toda la etiqueta de "enlace" de la hoja de estilo y justo antes de la etiqueta de cabecera cerrada (), significa que al final dentro de la etiqueta de "cabeza". Este formato funciona al 99% en todos los sitios web. Pero en algunos temas drupal bootstrap no funciona.

Recuerde guardar todo en la carpeta local del sitio web, no use CDN.

<!--[if lt IE 9]> <script type=''text/javascript'' src="/sites/all/themes/bootstrap_subtheme/js/css3-mediaqueries.js"></script> <script type=''text/javascript'' src="/sites/all/themes/bootstrap_subtheme/js/html5.js"></script> <script type=''text/javascript'' src="/sites/all/themes/bootstrap_subtheme/js/respond.min.js"></script> <![endif]-->

Intente usar html5shiv , es básicamente un script habilitador de HTML5 HTML5 y eso debería hacer que Bootstrap funcione en IE 6,7 y 8. Esto también puede vincularse directamente de esta manera:

<!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]-->

Debe incluirse antes del elemento <body> (es decir, en el <head>)

Muy a menudo las personas cargan CSS con consultas de medios (bootstrap y otros archivos) desde una red de entrega de contenido ( CDN , como oss.maxcdn.com o cdnjs.cloudflare.com). Respond.js no funciona con CSS cargado externamente, por lo que debe cargar su Bootstrap CSS (u otro CSS con consultas de medios) desde su servidor.

Sí en Internet Explorer 8 o en el ancho inferior de la clase ''contenedor'' como 940px. Pero en Internet Explorer9 +, Firefox, Google Chrome, etc., el ancho de la clase ''contianer'' es de 1170px.

El mismo tema se encuentra también en la Fundación Zurb.

Si suponemos que nuestro cliente solicitó no considerar el sitio web para ver en IE8 <, entonces comenzamos a implementar la característica RWD de bootstrap o zurb foundation

Sí, no es compatible con IE. No soy anti bootstrap pero reviso los códigos css del framework bootstrap. y descubrí que, los otros anchos no se definen como%, leí en otro artículo del blog que debería usar% para los anchos para que responda, lo cual es cierto.

y cuando se trata de ipad, el código css que está utilizando para esto por bootstrap no proviene de la consulta de medios, es simplemente un código css normal que no se declaró dentro de las consultas de medios. y es el ancho fijo que debe usar para ie7 y 8. (así que piénselo primero si quiere usar una cinta de arranque).

en el futuro (o quizás ahora) cuando haya un nuevo dispositivo que no sea compatible con el programa de arranque. su cliente puede volver a solucionar ese problema.

todos sabemos que ie7 y 8 siguen existiendo, por lo que también debería haber funcionado en esos dos navegadores antiguos.

así que si yo fuera usted, cree su propio marco para cumplir con todos los requisitos de su sitio / proyecto.

pero no soy un anti bootstrap, solo un pensamiento ... porque también estoy desarrollando sitios ...

Su problema es tratar de usar respond.js con hojas de estilo CSS que están en dominios externos. Respond.js solucionará las consultas de medios para IE6-IE8.

https://github.com/scottjehl/Respond#cdnx-domain-setup

Respond.js funciona solicitando una copia prístina de su CSS a través de AJAX, por lo que si aloja sus hojas de estilo en un CDN (o un subdominio), deberá cargar una página proxy para habilitar la comunicación entre dominios.

Ver cross-domain / example.html para una demostración:

Upload cross-domain/respond-proxy.html to your external domain Upload cross-domain/respond.proxy.gif to your origin domain Reference the file(s) via <link /> element(s): <!-- Respond.js proxy on external server --> <link href="http://externalcdn.com/respond-proxy.html" id="respond-proxy" rel="respond-proxy" /> <!-- Respond.js redirect location on local server --> <link href="/path/to/respond.proxy.gif" id="respond-redirect" rel="respond-redirect" /> <!-- Respond.js proxy script on local server --> <script src="/path/to/respond.proxy.js"></script>

Si tiene problemas con la configuración de dominios cruzados, asegúrese de que respond-proxy.html no tenga una cadena de consulta añadida.