Problema de IE8 con Twitter Bootstrap 3

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

En IE8 parece mostrar elementos de la versión móvil, pero se extiende por toda la pantalla de mi escritorio. Creo que el problema que tengo es que Twitter Bootstrap es móvil primero. Entonces, por alguna razón, IE8 va por esta opción.

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

<!-- Favicon -->
<link rel="shortcut icon" href="/favicon.ico">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">

<!-- Bootstrap -->
<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>

<!-- CSS -->
<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">&nbsp;</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">&nbsp;</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">

                        <!-- .navbar-toggle is used as the toggle for collapsed navbar content -->
                        <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>

                        <!-- Place everything within .navbar-collapse to hide it until above 768px -->
                        <div class="nav-collapse collapse navbar-responsive-collapse">
                            <ul class="nav nav-justified">
                                <li><span class="dropArrow">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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>
                        <!-- /.nav-collapse -->
                    </div>
                    <!-- /.container -->
                </div>
                <!-- /.navbar -->
            </div>

        </div>
    </div>
</header>

Obtuviste tu 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: CDN / X-Domain Setup

Nota Ver 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.

Ver 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:

<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
  <script src="../../assets/js/html5shiv.js"></script>
  <script src="../../assets/js/respond.min.js"></script>
<![endif]-->

También tuve que configurar la siguiente etiqueta META:

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

Tuve el mismo problema al hacer la transición de Bootstrap 2 a 3. Ya obtuve respond.js y html5shiv.js y configuré mi meta al borde. Me perdí que de 2 a 3 el tipo de elemento de la barra de navegación había cambiado. En Bootstrap 2 era nav. En Bootstrap 3 ahora es encabezado. Entonces, para resolver completamente el problema, tuve que

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

Ponga esto justo después de haber cargado mi CSS:

<!--[if lt IE 9]>  
    <script src="~/Content/compatibility/html5shiv.js"></script>
    <script src="~/Content/compatibility/respond.min.js"></script>
<![endif]-->

y luego cambiar

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

a

<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 Bootstrap.

En mi caso, el CSS minimizado de arranque estaba causando el problema. Para hacer que Bootstrap 3.0.2 responda en IE8 (emulado usando las herramientas de desarrollo F12) tuve que:

1 - Establezca la bandera compatible con X-UA.

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

2 - Use el bootstrap.css no minificado, en lugar de bootstrap.min.css

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

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

<!--[if lt IE 9]>
  <script src="/js/html5shiv.min.js"></script>
  <script src="/js/respond.min.js"></script>
<![endif]-->

poner respond.jsal final de la página pero antes de cerrar la bodyetiqueta y aquí hay un enlace respond.jsy ejecutar este código en su host local.

https://github.com/scottjehl/Respond

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

No se olvide de colocar sus enlaces CSS en el <head>que respond.jssolo toma esos.

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

Si desea usar BootstrapCDN, aquí hay un ejemplo de trabajo:

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<!--[if lt IE 9]>
    <link href="https://stackoverflow.com//netdna.bootstrapcdn.com/respond-proxy.html" id="respond-proxy" rel="respond-proxy" />
    <link href="img/ie/respond.proxy.gif" id="respond-redirect" rel="respond-redirect" />
    <script src="js/ie/html5shiv.js"></script>
    <script src="js/ie/respond.min.js"></script>
    <script src="js/ie/respond.proxy.js"></script>
<![endif]-->

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

Después de verificar:

• DOCTYPE
• Metaetiqueta compatible con X-UA
• Inclusión de html5shiv.js y respond.js (y descargando las últimas versiones)
• respond.js siendo local
• Sitio de alojamiento desde un servidor web y no desde Archivo: //
• No utilizo @import
• ...

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

Aquí hay un fragmento:

<!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>

    <!-- Moved these two lines up --> 
    <link href="includes/css/bootstrap.css" type="text/css" rel="stylesheet" />
    <script src="includes/js/bootstrap.js"></script>

    <!--[if lt IE 9]>
      <script src="includes/js/html5shiv.js"></script>
      <script src="includes/js/respond.min.js"></script>
    <![endif]-->    
</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>

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

El modo IE8 admite muchos estándares establecidos, incluida la especificación de nivel 2.1 de las hojas de estilo en cascada W3C y la API de selectores W3C; también proporciona soporte limitado para la Especificación de Nivel 3 de Hojas de Estilo en Cascada W3C (Borrador de Trabajo) y otros estándares emergentes.

El modo Edge le dice a Internet Explorer que muestre 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 admitiera un modo de compatibilidad más alto, las páginas configuradas en modo borde aparecerían en el modo más alto admitido por esa versión. Esas mismas páginas seguirían apareciendo en modo IE9 cuando se vean con Internet Explorer 9.

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

Necesario 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 es compatible con W3C.

Tengo una solución para este problema. En realidad, IE7 y 8 no son compatibles con @media correctamente y si verifica el css para las clases "col-md- *" y el ancho se da en el ancho del medio 992px. Simplemente cree un nuevo archivo css IE, 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 exactamente el mismo problema al migrar de bootstrapv2 a v3.

Si (como yo) migró al reemplazar el antiguo spanX con col-sm-X, también debe agregar clases col-X. col-X son los estilos que están fuera de los bloques @media, por lo que funcionan sin soporte de consultas 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";

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

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

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

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

<!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 representar 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 :-)

mi etiqueta de la cabeza es así:

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- Bootstrap core CSS -->
    <link href="css/modern-business.css" rel="stylesheet">
    <link href="font-awesome/css/font-awesome.min.css" rel="stylesheet">
    <link href="css/bootstrap.css" rel="stylesheet" media="screen">
    <script src="js/jquery.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/modern-business.js"></script>
     <!--[if lt IE 9]>
      <script src="js/html5shiv.js"></script>
      <script src="js/respond.js"></script>
    <![endif]-->  
</head>

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

Necesitamos respond.js para bootstrap 3 y no funcionará en la máquina local si solo lo ponemos en js y lo agregamos a html en el encabezado. Dirá acceso denegado. funciona solo a través del servidor ya que IE tiene restricciones de seguridad. :PAGS

He leído todos los comentarios aquí, probé todo ... pero no pude hacerlo funcionar con Windows 7 - Internet Explorer 11 ( con modo de documento: IE8 ).

Entonces se me ocurrió 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 de maravilla !

Puse este fragmento de código SOLO en la parte inferior de la página para que funcione:

<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</body>
</html>

Solo como un aviso. Tuve el mismo problema y ninguno de los anteriores me lo solucionó. Eventualmente descubrí que respond.js no analiza CSS referenciado a través de @import . Tenía toda bootstrap.min.cssla vía importada @importen mi main.css.

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

He resuelto los siguientes pasos.

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

(3.2)

<!--[if lt IE 9]>
  <script src="js/html5shiv.js"></script>
<![endif]-->  

usando cdn bootstrap desde la configuración del tema.

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

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" />

<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->

Usa esta solución

<!--[if lt IE 9]>
<script src="js/css3-mediaqueries.js"></script>
<link rel="stylesheet" type="text/css" href="css/bootstrap-ie7.css" />
<![endif]-->

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

Asegúrese de vincular la fuente de arranque por separado

Si usa LESSo SASSno es demasiado codicioso al compilar los estilos. En mi proyecto lo incluí bootstrap.min.cssen 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 boostrap no funcionaron correctamente. Cuando se agrega por separado, funciona como se esperaba.

Me enfrenté al mismo problema, probé 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 solía 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