Problema no IE8 com o Twitter Bootstrap 3


228

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>

1
Bem-vinda. Por favor, poste o código na pergunta também. Isso ajudará quem estiver olhando para essa pergunta nos próximos anos, quando o seu link não funcionar mais.
Mark Chorley

1
Obrigado! Eu editei agora, felicidades.
wrayvon

Respostas:


260

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

Por favor, perdoe-me se estou sendo obtuso ... mas respond.js??
precisa

6
Desculpas, eu sempre acho a solução adequada depois de postar perguntas ridículas ... confira getbootstrap.com/getting-started (especificamente na seção "Internet Explorer 8 e 9"). :)
Chris Kempen

1
Quais arquivos devem existir localmente, quais podem ser usados ​​na CDN? arquivos bootsrap.css, bootstrap.js, respond.js, html5shiv.js?
trante 27/09/13

3
um respond.js local funciona apenas com cópia local do bootstrap (mesmo domínio), consulte aqui github.com/scottjehl/Respond#cdnx-domain-setup
Bass Jobsen

6
Observe também que o Respond.js precisa ser definido após o arquivo css que contém as consultas de mídia. Caso contrário, eles não serão processados no IE8
helios456

62

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

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

Estou usando: <div class="left-finger-picker img-responsive">para mostrar uma imagem em que: left-finger-pickeré a seguinte: .left-finger-picker { width: 200px; height: 210px; position : relative; background-size: cover; background-image : url("../myPics/leftHand.png"); background-repeat: no-repeat; background-size: contain; } no entanto, ele não é responsivo no IE8
Hosein Aqajani

17

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.


Estou usando: <div class="left-finger-picker img-responsive">para mostrar uma imagem em que: left-finger-pickeré a seguinte: .left-finger-picker { width: 200px; height: 210px; position : relative; background-size: cover; background-image : url("../myPics/leftHand.png"); background-repeat: no-repeat; background-size: contain; } no entanto, ele não é responsivo no IE8
Hosein Aqajani

14

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

No meu caso também, o CSS compactado de bootstrap estava causando o problema no IE8.
Hrvoj3e

Estou usando: <div class="left-finger-picker img-responsive">para mostrar uma imagem em que: left-finger-pickeré a seguinte: .left-finger-picker { width: 200px; height: 210px; position : relative; background-size: cover; background-image : url("../myPics/leftHand.png"); background-repeat: no-repeat; background-size: contain; } no entanto, ele não é responsivo no IE8
Hosein Aqajani


6

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


5

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


5

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

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


4

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>

2
Mover o arquivo bootstrap.min.css, conforme recomendado aqui, era necessário para resolver meu problema. Mudei apenas o arquivo .css, o arquivo .js ainda é carregado posteriormente.
Chad McGrath

Mover meu arquivo CSS compilado (incluindo o Bootstrap) acima do html5shim e responder foi a solução para mim - obrigado
Código Amigável

2

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?


1

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.


1

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.


0

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

Ok, descobrimos que 100% não resolve o problema, pois as classes col-X são usadas para dispositivos móveis. De volta à área de desenho ...
andyberry88

As classes col-X nunca serão empilhadas; portanto, sua solução terá problemas em dispositivos pequenos. Sua solução também não corrige problemas com o @ grid-float-breakpoint, que também depende de consultas de mídia; portanto, sua barra de navegação não ficará horizontal. Veja também: stackoverflow.com/a/17920693/1596547
Bass Jobsen

0

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


0

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


0

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>

O Respond.js e os arquivos proxy também estão hospedados no cdnjs.cloudflare.com. confira cdnjs.com/libraries/respond.js para docs / links, e de bootstrap 3.03 também está hospedado lá: cdnjs.com/libraries/twitter-bootstrap
Troy Morehouse

0

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 .


0

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


1
Como as etapas 1 e 2 estão relacionadas à questão? O problema está no IE8 e no bootstrap. Drupal nem é mencionado na pergunta.
Adam Zuckerman 28/03

0

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

Olá Phill Healy, a solução que publiquei funcionou para mim. Seu comentário não é construtivo. Você tem que fornecer mais detalhes se você quiser ajudar
vutbao

1
O bootstrap do @vutbao funciona em versões> IE8. Se você deseja que ele funcione no IE8, é necessário adicionar respostas, mas as respostas não funcionarão se você estiver usando o CDN de inicialização. reserve um tempo para ler a resposta de Bass Jobsen.
Wreeecks

@Vutbao, dizer que sua resposta é A resposta definitiva para todos os problemas do Bootstrap 3 dessa natureza não está correta. No entanto, é isso que sua resposta diz. Como bwaaaaaa indica, há muitas questões a serem consideradas. Outra questão, por exemplo, pode ser o documento está no modo de peculiaridades, etc.
Phill Healey

Ponto tomado. Terei mais cuidado com a redação. Graças
vutbao

0

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


0

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.


0

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ê

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.