IE8 problema con Twitter Bootstrap 3

Question

IE8 problema con Twitter Bootstrap 3

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

En IE8 parece estar mostrando elementos de la versión móvil, pero se extendía a través de la pantalla completa de mi escritorio. Creo que el problema que estoy teniendo es que Twitter bootstrap es móvil primero. Así que por alguna razón IE8 va para esta opción.

También noto que la clase container no parece estar tirando de las propiedades CSS de ancho máximo como destinado. ¿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>

224

css html twitter-bootstrap internet-explorer-8 twitter-bootstrap-3

Author: 4444, 2013-07-30

Source

22 answers

También tuve que establecer la siguiente etiqueta META:

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

62

Author: Damian,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-08-05 09:47:03

Tuve este mismo problema al hacer la transición de Bootstrap 2 a 3. Ya tenía que responder.js y html5shiv.js y establecer mi meta a borde. Me había perdido que de 2 a 3 el tipo de elemento navbar había cambiado. En Bootstrap 2 fue nav. En Bootstrap 3 ahora es header. Así que para resolver completamente el problema tuve que

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

Pon esto justo después de cargar 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>

Oh, y en buena medida yo también añadido

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

Simplemente porque eso es lo que tiene el sitio Bootstrap.

17

Author: Giles Roberts,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-10-11 09:05:40

En mi caso, el CSS minificado de bootstrap estaba causando el problema. Para hacer que bootstrap 3.0.2 sea responsivo en IE8 (emulado usando las Herramientas para desarrolladores de F12) tuve que:

1 - Establezca la bandera compatible con X-UA.

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

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

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

3 - Añade la respuesta.js (and html5shiv.js)

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

14

Author: pedrusky,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-12-03 15:17:13

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

Https://github.com/scottjehl/Respond

6

Author: jignesh kheni,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-07-30 12:39:59

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

6

Author: TenJack,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-12-18 02:21:43

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

5

Author: Angel Yordanov,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-09-27 15:18:42

Como se ha dicho anteriormente, hay dos problemas diferentes: 1) IE8 no admite consultas de medios 2) responder.js usado en conjunto con archivos css entre dominios debe ser incluido como se describió anteriormente.

Si desea utilizar 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="//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 responder.proxy.gif, responde.min.js and response.proxy.js en directorios locales

5

Author: Matteo Rossi,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-12-06 10:14:59

Después de verificar:

DOCTYPE
Etiqueta meta compatible con X-UA
Inclusión de html5shiv.js y responde.js (y descargando las últimas versiones)
responde.js being local
Alojamiento del sitio desde un servidor web y no desde un archivo://
No usar @import
...

Todavía col-lg, col-md, y col-sm no estaban funcionando. Finalmente moví las referencias a bootstrap para estar antes de las referencias a html5shiv.js y responde.js y todo trabajar.

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>

4

Author: James Climer,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-05-08 20:05:08

Necesario añadir - <meta http-equiv="X-UA-Compatible" content="IE=edge">

Estaba usando Bootstrap 3 - lo tenía trabajando 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.

2

Author: Adam Kolinski,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-10-21 00:15:58

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

El modo IE8 soporta muchos estándares establecidos, incluyendo la Especificación W3C Cascading Style Sheets Level 2.1 y la API W3C Selectors; también proporciona soporte limitado para la Especificación W3C Cascading Style Sheets Level 3 (Working Draft) y otros estándares emergentes.

Borde el modo indica 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 compatibilidad más alto, las páginas configuradas en modo edge aparecerán en el modo más alto compatible con esa versión. Esas mismas páginas todavía aparecen en el modo IE9 cuando se ve con Internet Explorer 9.

Referencia ¿Qué hace ?

2

Author: Dextere,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-05-23 12:26:03

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

1

Author: Denise,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-01-03 00:22:04

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

Si (como yo) migró 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 media query.

Para fijar 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";

0

Author: andyberry88,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-07-30 16:54:46

He sufrido el mismo problema en IE 10.0. Sé que este no es exactamente el problema en el PO, pero tal vez 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 he eliminado la línea en blanco, y sin la magia X-UA-Compatible meta, IE 10 ha comenzado 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: -)

0

Author: Googol,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-10-30 16:49:32

Mi etiqueta de 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 quieres probar en local...pruebe a través de localhost, o cree un servidor de control de calidad y configure el contenido y pruebe.

Necesitamos responder.js para bootstrap 3 y no funcionará en la máquina local si 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 restricción de seguridad. : P

0

Author: sandeepnpn,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-01-21 07:16:39

He leído todos los comentarios aquí, lo intenté todo.. pero no pudo hacerlo funcionar con Windows 7 - Internet Explorer 11 (con el 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 este fragmento de código justo en la parte inferior de la página para hacerlo trabajo:

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

0

Author: Sneeuw,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-01-22 12:14:14

Solo como un aviso. Tuve el mismo problema y ninguno de los anteriores lo solucionó para mí. Finalmente descubrí que responder.js no analiza CSS referenciado a través de @import . Tenía todo bootstrap.min.css importado a través de @import en mi main.css.

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

0

Author: Alex Sutu,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-03-09 14:26:01

He resuelto los siguientes pasos.

(1) respuesta instalada.módulo js para drupal 7. (2) módulo lessphp para drupal 7 establecido en bibliotecas, en lugar de 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 drupal design and development www.devangsolanki.com

0

Author: user3471193,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-03-28 04:13:48

Si usa Bootstrap 3 y todo funciona bien en otros navegadores excepto IE, pruebe 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]-->

0

Author: vutbao,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-05-21 16:50:51

Utilice 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

0

Author: AC1D,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-11-02 17:29:15

Asegúrese de vincular la fuente de bootstrap por separado

Si usas LESS o SASS no seas demasiado codicioso con la compilación de los estilos. En mi proyecto incluí 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 boostrap no funcionaron correctamente. Cuando se agrega por separado, funciona como se espera.

0

Author: Atais,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-02-26 09:30:24

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 se cargue 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

0

Author: Sami Triki,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-10-20 11:30:51

score 259 · Accepted Answer

Tienes tu CSS de CDN (bootstrapcdn.com) responder.js solo funciona para archivos locales. Así que pruebe su sitio web en IE8 con una copia local de bootstrap.css. O leer: Configuración de CDN/X-Domain

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

Actualización:

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

Además, Internet Explorer 8 requiere el uso de respond.js a habilite la compatibilidad con consultas de medios.

Véase también: https://github.com/scottjehl/Respond

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

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