html - internet - descargar bootstrap 3

Problema de IE8 con Twitter Bootstrap 3 (22)

Estoy creando un sitio usando el nuevo Twitter Bootstrap. El sitio se ve bien y funciona en todos los navegadores requeridos, excepto IE8.

En IE8 parece que se muestran elementos de la versión móvil pero se extiende a través de la pantalla completa de mi escritorio. Creo que el problema que tengo es que Twitter bootstrap es móvil primero. Así que por alguna razón IE8 va por esta opción.

También me doy cuenta de que la clase container no parece estar tirando de las propiedades CSS de ancho máximo como se esperaba. ¿Alguien puede ver lo que he hecho mal?

 <link rel="shortcut icon" href="/favicon.ico"> <link rel="apple-touch-icon" href="/apple-touch-icon.png">  <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/css/bootstrap.css" rel="stylesheet"> <link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet"> <script src="/SiteFiles/js/modernizr.js"></script>  <link href="/SiteFiles/css/main.css" rel="stylesheet">

<header> <div class="topArea clearfix"> <div class="container"> <div class="topLinks"> <div class="btn-group"> <span class="flag" data-toggle="dropdown"> </span> <ul class="dropdown-menu"> <li><a href="#">Country 1</a></li> <li><a href="#">Country 2</a></li> <li><a href="#">Country 3</a></li> <li class="divider"></li> <li><a href="#">Country 4</a></li> <li><a href="#">Country 5</a></li> <li><a href="#">Country 6</a></li> </ul> </div> <div class="visible-sm btn-group"> <div class="plus" data-toggle="dropdown"><i class="icon-plus icon-2x"> </i></div> <ul class="dropdown-menu"> <li><a href="#">Parts & Service</a></li> <li><a href="#">Store Locator</a></li> <li><a href="#">Find a Service Centre</a></li> <li><a href="#">Parts List</a></li> <li><a href="#">Tool Vibration</a></li> <li><a href="#">Resource Centre</a></li> <li><a href="#">Media Centre</a></li> <li><a href="#">Register your Tools</a></li> <li><a href="#">About Us</a></li> <li><a href="#"> <button type="button" class="btn btn-default">Where to Buy</button></a></li> </ul> </div> <div class="topNav"> <ul class="hidden-sm"> <li> <div class="btn-group"> <a href="#" data-toggle="dropdown">Parts & Service</a> <ul class="dropdown-menu"> <li><a href="#">Store Locator</a></li> <li><a href="#">Find a Service Centre</a></li> <li><a href="#">Parts List</a></li> <li><a href="#">Tool Vibration</a></li> </ul> </div> </li> <li><a href="#">Resource Centre</a></li> <li><a href="#">Media Centre</a></li> <li><a href="#">Register your Tools</a></li> <li><a href="#">About Us</a></li> <li><a href="#"> <button type="button" class="btn btn-default">Where to Buy</button></a></li> </ul> </div> <div class="searchArea"> <input type="text" /> <a href="#" class="goBtn">GO</a> </div> </div> </div> </div> <div class="mainNavArea"> <div class="container rel"> <div class="logo"> <img src="/SiteFiles/img/logo.png" title="Milwaukee - Nothing but heavy duty" alt="Milwaukee - Nothing but heavy duty" /> </div> <div class="navi"> <div class="navbar"> <div class="container">  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>  <div class="nav-collapse collapse navbar-responsive-collapse"> <ul class="nav nav-justified"> <li><span class="dropArrow"> </span><span class="topNavPosition">Power Tools</span> <div class="navDrop"> <div class="navDropInner"> <div class="row"> <div class="hidden-sm col-sm-4 col-lg-4"> <img src="/SiteFiles/img/drill.jpg" alt="" /> </div> <div class="col-12 col-sm-8 col-lg-8"> <h2>Power Tools</h2> <div class="row"> <div class="col-6 col-sm-6 col-lg-6"> <a href="#">Cutters</a> <a href="#">Levels</a> <a href="#">Pliers</a> <a href="#">Saws</a> <a href="#">Screwdrivers</a> </div> <div class="col-6 col-sm-6 col-lg-6"> <a href="#">Snips</a> <a href="#">Utility Knives</a> <a href="#">Combo Knives</a> <a href="#">Hand Tool Accessories</a> </div> </div> </div> </div> </div> <a href="#" class="closeNav">X</a> </div> </li> <li><span class="dropArrow"> </span><span class="topNavPosition">Hand Tools</span> <div class="navDrop"> <div class="navDropInner"> <div class="row"> <div class="hidden-sm col-sm-4 col-lg-4"> <img src="/SiteFiles/img/drill.jpg" alt="" /> </div> <div class="col-12 col-sm-8 col-lg-8"> <h2>Hand Tools</h2> <div class="row"> <div class="col-6 col-sm-6 col-lg-6"> <a href="#">Cutters</a> <a href="#">Levels</a> <a href="#">Pliers</a> <a href="#">Saws</a> <a href="#">Screwdrivers</a> </div> <div class="col-6 col-sm-6 col-lg-6"> <a href="#">Snips</a> <a href="#">Utility Knives</a> <a href="#">Combo Knives</a> <a href="#">Hand Tool Accessories</a> </div> </div> </div> </div> </div> <a href="#" class="closeNav">X</a> </div> </li> <li><span class="dropArrow"> </span><span class="topNavPosition">Test & Measurement</span> <div class="navDrop"> <div class="navDropInner"> <div class="row"> <div class="hidden-sm col-sm-4 col-lg-4"> <img src="/SiteFiles/img/drill.jpg" alt="" /> </div> <div class="col-12 col-sm-8 col-lg-8"> <h2>Test & Measurement</h2> <div class="row"> <div class="col-6 col-sm-6 col-lg-6"> <a href="#">Cutters</a> <a href="#">Levels</a> <a href="#">Pliers</a> <a href="#">Saws</a> <a href="#">Screwdrivers</a> </div> <div class="col-6 col-sm-6 col-lg-6"> <a href="#">Snips</a> <a href="#">Utility Knives</a> <a href="#">Combo Knives</a> <a href="#">Hand Tool Accessories</a> </div> </div> </div> </div> </div> <a href="#" class="closeNav">X</a> </div> </li> <li><span class="dropArrow"> </span><span class="topNavPosition">Accessories</span> <div class="navDrop"> <div class="navDropInner"> <div class="row"> <div class="hidden-sm col-sm-4 col-lg-4"> <img src="/SiteFiles/img/drill.jpg" alt="" /> </div> <div class="col-12 col-sm-8 col-lg-8"> <h2>Accessories</h2> <div class="row"> <div class="col-6 col-sm-6 col-lg-6"> <a href="#">Cutters</a> <a href="#">Levels</a> <a href="#">Pliers</a> <a href="#">Saws</a> <a href="#">Screwdrivers</a> </div> <div class="col-6 col-sm-6 col-lg-6"> <a href="#">Snips</a> <a href="#">Utility Knives</a> <a href="#">Combo Knives</a> <a href="#">Hand Tool Accessories</a> </div> </div> </div> </div> </div> <a href="#" class="closeNav">X</a> </div> </li> </ul> </div>  </div>  </div>  </div> </div> </div> </header>

Asegúrate de vincular la fuente bootstrap por separado

Si usas LESS o SASS no te apresures a compilar los estilos. En mi proyecto, bootstrap.min.css en mi estilo principal, en la parte superior del archivo, por lo que solo debería haber una solicitud para todos los estilos.

Y debido a eso, las clases de boostrap no funcionaron correctamente. Cuando se agrega por separado, funciona como se espera.

Como se indicó anteriormente, hay dos problemas diferentes: 1) IE8 no admite consultas de medios 2) respond.js utilizado junto con archivos css de dominios cruzados debe incluirse como se describió anteriormente.

Si desea utilizar BootstrapCDN, aquí tiene un ejemplo práctico:

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css"> 

También asegúrese de copiar respond.proxy.gif, respond.min.js y response.proxy.js en directorios locales

De la explicación se dice que IE8 es la versión estándar para usted y que content="IE=edge" hará que la página se encuentre en el modo más alto. Para hacerlo compatible, cámbielo a content="IE=8" .

El modo IE8 es compatible con muchos estándares establecidos, incluida la especificación del Nivel 2.1 de las hojas de estilo en cascada del W3C y la API de selectores del W3C; también proporciona soporte limitado para la Especificación de Nivel 3 de las Hojas de Estilo en Cascada W3C (Borrador de Trabajo) y otros estándares emergentes.
El modo perimetral le dice a Internet Explorer que muestre el contenido en el modo más alto disponible. Con Internet Explorer 9, esto es equivalente al modo IE9. Si una versión futura de Internet Explorer admite un modo de mayor compatibilidad, las páginas configuradas en modo borde aparecerán en el modo más alto compatible con esa versión. Esas mismas páginas seguirán apareciendo en el modo IE9 cuando se visualicen con Internet Explorer 9.

Referencia ¿Qué hace <meta http-equiv = "X-UA-Compatible" content = "IE = edge">?

Después de verificar:

DOCTYPE
Etiqueta meta compatible con X-UA
Inclusión de html5shiv.js y respond.js (y descarga de las últimas versiones)
respond.js siendo local
Sitio de alojamiento de un servidor web y no de Archivo: //
No usar @import
...

Todavía no funcionaban col-lg, col-md y col-sm. Finalmente, moví las referencias a bootstrap antes de las referencias a html5shiv.js y respond.js y todo funcionó.

Aquí hay un fragmento de código:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>Bootstrap Test for IE8</title>  <link href="includes/css/bootstrap.css" type="text/css" rel="stylesheet" /> <script src="includes/js/bootstrap.js"></script>  </head> <body> <div class="container"> <div class="row"> <div class="col-md-4" style="background-color:red;">col-md-4</div> <div class="col-md-8" style="background-color:green;">col-md-8</div> </div> </div> </body> </html>

En mi caso, el CSS minificado de bootstrap estaba causando el problema. Para hacer que bootstrap 3.0.2 sea receptivo en IE8 (emulado con las herramientas de desarrollo F12) tuve que:

1 - Establecer la bandera de X-UA Compatible.

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

2: use bootstrap.css no minificado, en lugar de bootstrap.min.css

<link href="/css/bootstrap.css" rel="stylesheet" />

3 - Agregue el respond.js (y html5shiv.js)

He leído todos los comentarios aquí, lo intenté todo ... pero no pude hacer que funcionara con Windows 7 - Internet Explorer 11 ( con modo de documento: IE8 ).

Entonces me vino a la mente que ejecutar un modo de documento (IE8) no es lo mismo que el IE8 real, así que instalé Windows Virtual PC ( Windows 7 con Internet Explorer 8 ) y tadaaaa ... ¡ funciona como un encanto!

He puesto esta pieza de código JUST en la parte inferior de la página para que funcione:

   </body> </html>

He resuelto a continuación los pasos.

(1) instaló el módulo Respond.js para drupal 7. (2) módulo lessphp para drupal 7 establecido en las bibliotecas, en lugar de la carpeta del módulo. (3) (3.1) <meta http-equiv="X-UA-Compatible" content="IE=edge">

(3.2)

usando cdn bootstrap desde la configuración del tema.

Para obtener más información, consulte el blog de mi sitio web para el diseño y desarrollo de drupal www.devangsolanki.com

He sufrido el mismo problema en IE 10.0. Sé que este no es exactamente el problema en el OP, pero quizás sea útil para otros.

En mi caso, tenía una línea vacía al principio del documento:

[blank line] <!DOCTYPE html> <html lang="es"> ...

Si la línea en blanco está entre el DOCTYPE y la etiqueta, el problema también se muestra:

<!DOCTYPE html> [blank line] <html lang="es">

Una vez que eliminé la línea en blanco y sin el meta mágico compatible con X-UA, IE 10 comenzó a renderizar el sitio correctamente.

Si está utilizando PHP y Smarty, tenga cuidado con sus comentarios de Smarty porque agregarán esas líneas en blanco problemáticas :-)

Justo como un heads up. Tuve el mismo problema y ninguno de los anteriores lo solucionó. Finalmente, descubrí que respond.js no analiza el CSS al que se hace referencia a través de @import . Tuve todo el bootstrap.min.css importado a través de @import en mi main.css .

Así que asegúrese de no tener ningún CSS que contenga sus consultas de medios a las que se hace referencia a través de @import .

Me enfrenté al mismo problema, intenté la primera respuesta pero faltaba algo.

Si están usando Webpack, su css se cargará como una etiqueta de estilo que no es compatible con respond.js, necesita un archivo, así que asegúrese de que bootstrap esté cargado como un archivo css

Personalmente usé extract-text-webpack-plugin

const webpack = require("webpack") const ExtractTextPlugin = require("extract-text-webpack-plugin") const path = require("path") module.exports = { context: __dirname+"/src", entry: "./index.js", output: { filename: "./dist/bundle.js", path: __dirname }, plugins: [ ..., new ExtractTextPlugin("./dist/bootstrap.css", { allChunks: true }) ], module: { loaders: [ ..., // your css loader excluding bootstrap { test: //.css$/, loader: "style!css", exclude: [ path.resolve(__dirname, "node_modules/bootstrap/dist/css/bootstrap.css") ] }, { // loads bootstrap as a file, change path accordingly if needs be, path needs to be absolute include: [ path.resolve(__dirname, "node_modules/bootstrap/dist/css/bootstrap.css") ], loader: ExtractTextPlugin.extract("style-loader", "css-loader?minimize") } ] } }

Espero que te ayude

Mi etiqueta de la cabeza es así:

si desea probar en local ... intente a través de localhost, o cree un servidor de control de calidad y configure el contenido e intente.

Necesitamos respond.js para bootstrap 3 y no funcionará en la máquina local si simplemente lo colocamos en js y lo agregamos a html en el encabezado. Se dirá acceso denegado. funciona solo a través del servidor ya que IE tiene restricción de seguridad. :PAG

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

Estaba usando Bootstrap 3 - lo tenía funcionando en IE en mi local.

Lo puse en vivo no funcionó en IE.

Just Bootstrap no incluye esa línea de código en sus plantillas, no estoy seguro de por qué, pero podría deberse a que no sea compatible con W3C.

No olvide colocar sus enlaces css en el <head> ya que respond.js toma solo esos.

Obtuvo su CSS de CDN (bootstrapcdn.com) respond.js solo funciona para archivos locales. Pruebe su sitio web en IE8 con una copia local de bootstrap.css. O lea: Configuración de CDN / X-Domain

Nota Consulte también: https://github.com/scottjehl/Respond/pull/206

Actualizar:

Por favor lea: http://getbootstrap.com/getting-started/#support

Además, Internet Explorer 8 requiere el uso de respond.js para habilitar el soporte de consultas de medios.

Consulte también: https://github.com/scottjehl/Respond

Por esta razón, la plantilla básica contiene estas líneas en la sección de encabezado:

 

Por si acaso. Asegúrese de cargar los archivos js específicos de IE después de cargar sus archivos css.

Si usa Bootstrap 3 y todo funciona bien en otros navegadores excepto IE, intente lo siguiente.

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

También tuve que establecer la siguiente etiqueta META:

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

Tengo una solución para este problema. En realidad, IE7 y 8 no admiten el @media correctamente y si se comprueban las clases "col-md- *" en el css y el ancho se indica en el ancho del medio 992px. Simplemente cree un nuevo archivo css, por ejemplo, IE.css y agregue los comentarios condicionales. Y luego simplemente copie las clases requeridas para su diseño directamente con cualquier consulta de medios allí y listo.

Tuve este mismo problema al realizar la transición de Bootstrap 2 a 3. Ya tenía respond.js y html5shiv.js y configuré mi meta en borde. Me había perdido que de 2 a 3 el tipo de elemento de la barra de navegación había cambiado. En Bootstrap 2 fue nav. En Bootstrap 3 ahora es cabecera. Así que para resolver completamente el problema tuve que

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

Pon esto justo después de que cargué mi css:

y luego cambiar

<nav class="navbar" role="navigation"> </nav>

<header class="navbar" role="navigation"> </header>

Ah y por si acaso también agregué

<meta name="viewport" content="width=device-width, initial-scale=1.0">

simplemente porque eso es lo que tiene el sitio de Bootstrap.

Tuve exactamente el mismo problema al migrar de bootstrapv2 a v3.

Si (como yo) ha migrado reemplazando el antiguo spanX con col-sm-X, también necesita agregar clases col-X. col-X son los estilos que están fuera de cualquier bloque @media, por lo que funcionan sin soporte de consulta de medios.

Para arreglar el ancho del contenedor, puede configurarlo usted mismo fuera de un bloque @media. Algo como:

.container { max-width: @container-tablet; } @import "twitter-bootstrap/less/bootstrap";

Usa esta solución

Esta cadena <script src="js/css3-mediaqueries.js"></script> habilita mediaqueries. Esta cadena <link rel="stylesheet" type="text/css" href="css/bootstrap-ie7.css" /> habilita las fuentes bootstrap.

Probado en Bootstrap 3.3.5

Enlace para descargar mediaqieries.js . Enlace para descargar bootstrap-ie7.css

ponga respond.js al final de la página pero antes de cerrar body etiqueta del body y aquí está el enlace de respond.js y ejecute este código en su host local.

https://github.com/scottjehl/Respond