Problema no IE8 com o Twitter Bootstrap 3

Estou criando um site usando o novo Twitter Bootstrap. O site parece bom e funciona em todos os navegadores necessários, exceto no IE8.

No IE8, parece estar exibindo elementos da versão móvel, mas se estende por toda a tela da minha área de trabalho. Acredito que o problema que estou tendo é que a inicialização do Twitter seja móvel primeiro. Então, por alguma razão, o IE8 está optando por essa opção.

Percebo também que a containerclasse não parece estar puxando as propriedades CSS de largura máxima como pretendido. Alguém pode ver o que eu fiz de errado?

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

Você obteve seu CSS da CDN (bootstrapcdn.com) respond.js funciona apenas para arquivos locais. Portanto, tente seu site no IE8 com uma cópia local do bootstrap.css. Ou leia: Configuração do CDN / X-Domain

Nota Veja também: https://github.com/scottjehl/Respond/pull/206

Atualizar:

Leia: http://getbootstrap.com/getting-started/#support

Além disso, o Internet Explorer 8 requer o uso do respond.js para ativar o suporte à consulta de mídia.

Veja também: https://github.com/scottjehl/Respond

Por esse motivo, o modelo básico contém estas linhas na seção 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]-->

Eu também tive que definir a seguinte tag META:

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

Eu tive esse mesmo problema ao fazer a transição do Bootstrap 2 para o 3. Eu já tinha o respond.js e o html5shiv.js e defini minha meta para o limite. Perdi que de 2 para 3 o tipo de elemento da barra de navegação havia mudado. No Bootstrap 2, era nav. No Bootstrap 3, agora é o cabeçalho. Então, para resolver completamente o problema, tive que

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

Coloque isso logo depois que eu carreguei meu css:

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

e depois mudar

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

para

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

Ah, e por uma boa medida eu também adicionei

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

simplesmente porque é isso que o próprio site Bootstrap possui.

No meu caso, o CSS compactado de bootstrap estava causando o problema. Para tornar o bootstrap 3.0.2 responsivo no IE8 (emulado usando as Ferramentas de Desenvolvedor F12), tive que:

1 - Defina o sinalizador compatível com X-UA.

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

2 - Use o bootstrap.css não minificado, em vez do bootstrap.min.css

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

3 - Adicione o respond.js (e o html5shiv.js)

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

coloque respond.jsna parte inferior da página, mas antes de fechar a bodytag e aqui está o link respond.jse execute esse código no seu host local.

https://github.com/scottjehl/Respond

Apenas no caso de. Certifique-se de carregar os arquivos js específicos do IE depois de carregar seus arquivos css.

Não se esqueça de colocar seus links de css no <head>como respond.jsleva apenas aqueles.

Como afirmado anteriormente, existem dois problemas diferentes: 1) O IE8 não suporta consultas de mídia 2) respon.js usado em conjunto com arquivos css entre domínios deve ser incluído como descrito anteriormente.

Se você deseja usar o BootstrapCDN, aqui está um exemplo:

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<!--[if lt IE 9]>
    <link href="https://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]-->

Certifique-se também de copiar o arquivo answer.proxy.gif, respond.min.js e response.proxy.js nos diretórios locais

Depois de verificar:

• DOCTYPE
• Meta tag Compatível com X-UA
• Inclusão de html5shiv.js e respond.js (e baixando as versões mais recentes)
• respond.js sendo local
• Hospedando site de um servidor da web e não de File: //
• Não usando @import
• ...

Ainda assim, col-lg, col-md e col-sm não estavam funcionando. Finalmente, mudei as referências para o bootstrap antes das referências ao html5shiv.js e respond.js e tudo funcionou.

Aqui está um trecho:

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

A partir da explicação, ele diz que o IE8 é a versão padrão para você e a criação content="IE=edge"renderiza a página no modo mais alto. Para torná-lo compatível, altere-o para content="IE=8".

O modo IE8 suporta muitos padrões estabelecidos, incluindo a especificação W3C Cascading Style Sheets Level 2.1 e a API W3C Selectors; ele também fornece suporte limitado para a especificação de nível 3 das folhas de estilo em cascata W3C (rascunho de trabalho) e outros padrões emergentes.

O modo de borda informa ao Internet Explorer para exibir o conteúdo no modo mais alto disponível. Com o Internet Explorer 9, isso é equivalente ao modo IE9. Se uma versão futura do Internet Explorer oferecer suporte a um modo de compatibilidade mais alto, as páginas definidas no modo de borda aparecerão no modo mais alto suportado por essa versão. Essas mesmas páginas ainda apareceriam no modo IE9 quando exibidas no Internet Explorer 9.

Referência O que <meta http-equiv = "Compatível com X-UA" content = "IE = edge"> faz?

Necessário adicionar - <meta http-equiv="X-UA-Compatible" content="IE=edge">

Eu estava usando o Bootstrap 3 - ele estava trabalhando no IE no meu local.

Coloquei ao vivo não funcionou no IE.

Apenas o Bootstrap não inclui essa linha de código em seus modelos, não sei por que, mas pode ser devido ao fato de não ser compatível com o W3C.

Eu tenho uma correção para esse problema. Na verdade, o IE7 e o 8 não suportam o @media corretamente e se você verificar o css quanto às classes “col-md- *” e a largura for dada na largura da mídia 992px. Basta criar um novo arquivo css no IE, por exemplo: IE.css e adicionar comentários condicionais. E, em seguida, basta copiar as classes necessárias para o seu design diretamente com todas as consultas de mídia existentes e pronto.

Eu tive exatamente o mesmo problema ao migrar do bootstrapv2 para a v3.

Se (como eu) você migrou substituindo o spanX antigo por col-sm-X, você também precisará adicionar classes col-X. col-X são os estilos que estão fora dos blocos @media, para que funcionem sem o suporte à consulta de mídia.

Para fixar a largura do contêiner, você pode configurá-lo fora de um bloco @media. Algo como:

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

Eu sofri o mesmo problema no IE 10.0. Sei que esse não é exatamente o problema no OP, mas talvez seja útil para outros.

No meu caso, eu tinha uma linha vazia no início do documento:

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

Se a linha em branco estiver entre o DOCTYPE e a tag, o problema também será mostrado:

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

Depois de remover a linha em branco, e sem a meta mágica compatível com X-UA, o IE 10 começou a renderizar o site corretamente.

Se você estiver usando PHP e Smarty, tenha cuidado com seus comentários, pois eles adicionarão essas linhas em branco problemáticas :-)

minha tag head é assim:

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

se você quiser tentar no local ... tente através do host local ou crie um servidor de controle de qualidade e defina o conteúdo e tente.

Precisamos do respond.js para o bootstrap 3 e ele não funcionará na máquina local se apenas o colocarmos em js e anexá-lo ao html no cabeçalho. Dirá acesso negado. Ele funciona apenas através do servidor, pois o IE possui restrição de segurança. : P

Eu li todos os comentários aqui, tentei de tudo .. mas não consegui fazê-lo funcionar com o Windows 7 - Internet Explorer 11 ( com modo de documento: IE8 ).

Então, lembrei-me de que executar um modo de documento (IE8) não é o mesmo que o verdadeiro IE8, então instalei o Windows Virtual PC ( Windows 7 com Internet Explorer 8 ) e o tadaaaa ... funciona como um encanto!

Coloquei esse código APENAS na parte inferior da página para fazê-lo funcionar:

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

Assim como um alerta. Eu tive o mesmo problema e nenhuma das alternativas acima o corrigiu para mim. Eventualmente, descobri que o respond.js não analisa o CSS referenciado por @import . Eu tinha todo o bootstrap.min.cssimportado via @importno meumain.css .

Portanto, verifique se você não possui CSS que contenha suas consultas de mídia referenciadas via @import .

Resolvi as etapas abaixo.

(1) instalou o módulo Respond.js. para drupal 7. (2) módulo lessphp para drupal 7 definido nas bibliotecas, em vez da pasta do 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 o cdn bootstrap da configuração do tema.

Para saber mais, consulte o blog do meu site para o design e desenvolvimento de drupal www.devangsolanki.com

Se você usa o Bootstrap 3 e tudo funciona bem em outros navegadores, exceto o IE, tente o abaixo.

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

Use esta solução

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

Essa sequência <script src="js/css3-mediaqueries.js"></script>habilita mediaqueries. Essa sequência <link rel="stylesheet" type="text/css" href="css/bootstrap-ie7.css" />habilita fontes de autoinicialização.

Testado no Bootstrap 3.3.5

Link para download do mediaqieries.js . Link para download do bootstrap-ie7.css

Certifique-se de vincular a fonte de auto-inicialização separadamente

Se você usa LESSou SASSnão gosta de compilar os estilos. No meu projeto eu incluíbootstrap.min.css no meu estilo principal, na parte superior do arquivo - portanto, deve haver apenas uma solicitação para todos os estilos.

E por causa disso, as classes boostrap não funcionaram corretamente. Quando adicionado separadamente, funciona conforme o esperado.

Eu enfrentei o mesmo problema, tentei a primeira resposta, mas algo estava faltando.

Se vocês estão usando o Webpack, seu css será carregado como uma tag de estilo que não é suportada pelo respond.js, ele precisa de um arquivo, portanto, verifique se o bootstrap foi carregado como um arquivo css

Pessoalmente eu costumava 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 ajude você