Problema IE8 con Twitter Bootstrap 3

Sto creando un sito utilizzando il nuovo Bootstrap di Twitter. Il sito ha un bell'aspetto e funziona con tutti i browser richiesti tranne IE8.

In IE8 sembra mostrare elementi della versione mobile ma si estende su tutto lo schermo del mio desktop. Credo che il problema che sto avendo sia che il bootstrap di Twitter sia mobile per primo. Quindi per qualche motivo IE8 sta optando per questa opzione.

Noto anche che la containerclasse non sembra tirare le proprietà CSS di larghezza massima come previsto. Qualcuno può vedere cosa ho fatto di sbagliato?

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

Hai ottenuto il tuo CSS da CDN (bootstrapcdn.com) respond.js funziona solo con file locali. Quindi prova il tuo sito Web su IE8 con una copia locale di bootstrap.css. Oppure leggi: CDN / X-Domain Setup

Nota Vedi anche: https://github.com/scottjehl/Respond/pull/206

Aggiornare:

Si prega di leggere: http://getbootstrap.com/getting-started/#support

Inoltre, Internet Explorer 8 richiede l'uso di respond.js per abilitare il supporto per le query multimediali.

Guarda anche: https://github.com/scottjehl/Respond

Per questo motivo il modello base contiene queste righe nella sezione head:

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

Ho anche dovuto impostare il seguente tag META:

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

Ho avuto lo stesso problema durante la transizione da Bootstrap 2 a 3. Avevo già avuto respond.js e html5shiv.js e impostato il mio meta su edge. Mi mancava che da 2 a 3 il tipo di elemento della barra di navigazione fosse cambiato. In Bootstrap 2 era nav. In Bootstrap 3 è ora intestazione. Quindi, per risolvere completamente il problema che ho dovuto

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

Mettilo subito dopo aver caricato il mio CSS:

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

e poi cambia

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

per

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

Oh, e per buona misura ho anche aggiunto

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

semplicemente perché è quello che ha il sito Bootstrap stesso.

Nel mio caso, il CSS minimizzato bootstrap stava causando il problema. Per rendere reattivo bootstrap 3.0.2 in IE8 (emulato usando gli Strumenti per sviluppatori F12) ho dovuto:

1 - Imposta il flag compatibile con X-UA.

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

2 - Utilizzare bootstrap.css non minimizzato, anziché bootstrap.min.css

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

3 - Aggiungi respond.js (e html5shiv.js)

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

metti respond.jsin fondo alla pagina ma prima di chiudere il bodytag e qui c'è il link respond.jsed esegui questo codice nel tuo localhost.

https://github.com/scottjehl/Respond

Nel caso in cui. Assicurati di caricare i file js specifici di IE dopo aver caricato i tuoi file css.

Non dimenticare di inserire i tuoi collegamenti CSS in <head>quanto respond.jsprende solo quelli.

Come precedentemente affermato, esistono due diversi problemi: 1) IE8 non supporta le media query 2) respond.js utilizzato insieme ai file CSS tra domini deve essere incluso come descritto in precedenza.

Se vuoi usare BootstrapCDN ecco un esempio funzionante:

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

Assicurati inoltre di copiare respond.proxy.gif, respond.min.js e response.proxy.js nelle directory locali

Dopo aver verificato:

• DOCTYPE
• Meta tag compatibile con X-UA
• Inclusione di html5shiv.js e respond.js (e download delle ultime versioni)
• respond.js essendo locale
• Sito di hosting da un server Web e non da File: //
• Non usando @import
• ...

Ancora col-lg, col-md e col-sm non funzionavano. Alla fine ho spostato i riferimenti a bootstrap prima dei riferimenti a html5shiv.js e respond.js e tutto ha funzionato.

Ecco uno snippet:

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

Dalla spiegazione dice che IE8 è la versione standard per te e che content="IE=edge"rende la pagina nella modalità più alta. Per renderlo compatibile, cambiarlo in content="IE=8".

La modalità IE8 supporta molti standard consolidati, tra cui la specifica W3C Cascading Style Sheets Level 2.1 e l'API dei selettori W3C; fornisce inoltre un supporto limitato per le specifiche di livello 3 (Working Draft) del W3C Cascading Style Sheets.

La modalità Edge indica a Internet Explorer di visualizzare il contenuto nella modalità più alta disponibile. Con Internet Explorer 9, questo equivale alla modalità IE9. Se una versione futura di Internet Explorer supportasse una modalità di compatibilità più elevata, le pagine impostate sulla modalità edge appariranno nella modalità più alta supportata da quella versione. Queste stesse pagine appariranno comunque in modalità IE9 se visualizzate con Internet Explorer 9.

Riferimento Cosa fa <meta http-equiv = "X-UA-Compatible" content = "IE = edge">?

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

Stavo usando Bootstrap 3 - funzionava su IE sul mio locale.

L'ho messo in diretta non ha funzionato in IE.

Solo Bootstrap non include quella riga di codice nei loro modelli, non sono sicuro del perché, ma potrebbe essere dovuto al fatto che non è compatibile con W3C.

Ho una correzione per questo problema. In realtà IE7 e 8 non supportano correttamente @media e se si controlla il css per le classi "col-md- *" e la loro larghezza viene data in larghezza del supporto 992px. Basta creare un nuovo file css IE, ad esempio: IE.css e aggiungere i commenti condizionali. E poi basta copiare le classi richieste per la progettazione direttamente con qualsiasi media query lì e il gioco è fatto.

Ho avuto esattamente lo stesso problema durante la migrazione da bootstrapv2 a v3.

Se (come me) sei migrato sostituendo il vecchio spanX con col-sm-X devi anche aggiungere le classi col-X. col-X sono gli stili che si trovano all'esterno di qualsiasi blocco @media, quindi funzionano senza il supporto di media query.

Per correggere la larghezza del contenitore è possibile impostarlo da soli al di fuori di un blocco @media. Qualcosa di simile a:

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

Ho riscontrato lo stesso problema in IE 10.0. So che questo non è esattamente il problema nel PO, ma forse sarà utile per gli altri.

Nel mio caso, all'inizio del documento avevo una riga vuota:

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

Se la riga vuota si trova tra DOCTYPE e il tag, viene visualizzato anche il problema:

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

Una volta rimossa la riga vuota e senza il magico meta compatibile con X-UA, IE 10 ha iniziato a renderizzare correttamente il sito.

Se stai usando PHP e Smarty stai attento con i tuoi commenti Smarty perché aggiungeranno quelle righe vuote problematiche :-)

il mio tag head è così:

<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 si desidera provare in locale ... provare tramite localhost o creare un server QA e impostare il contenuto e provare.

Abbiamo bisogno di respond.js per bootstrap 3 e non funzionerà nel computer locale se lo inseriamo in js e lo accodiamo a html nell'intestazione. Dirà accesso negato. funziona solo attraverso il server poiché IE ha restrizioni di sicurezza. : P

Ho letto tutti i commenti qui, provato tutto .. ma non sono riuscito a farlo funzionare con Windows 7 - Internet Explorer 11 ( con modalità documento: IE8 ).

Poi mi è venuto in mente che eseguire una modalità documento (IE8) non è la stessa della vera IE8, quindi ho installato Windows Virtual PC ( Windows 7 con Internet Explorer 8 ) e tadaaaa ... funziona come un fascino!

Ho messo questo pezzo di codice SOLO in fondo alla pagina per farlo funzionare:

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

Proprio come un avvertimento. Ho avuto lo stesso problema e nessuno dei precedenti ha risolto il problema per me. Alla fine ho scoperto che respond.js non analizza i CSS referenziati tramite @import . Ho avuto l'intero bootstrap.min.cssimportato tramite @importnel mio main.css.

Quindi assicurati di non avere CSS che contenga le tue query multimediali a cui fai riferimento tramite @import .

Ho risolto i passaggi seguenti.

(1) modulo Respond.js installato per drupal 7. (2) modulo lessphp per drupal 7 impostato nelle librerie, anziché nella cartella del modulo. (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 dall'impostazione del tema.

Per saperne di più, consulta il blog del mio sito Web per la progettazione e lo sviluppo di drupal www.devangsolanki.com

Se usi Bootstrap 3 e tutto funziona bene su altri browser tranne IE, prova quanto segue.

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

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

Usa questa soluzione

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

Questa stringa <script src="js/css3-mediaqueries.js"></script>abilita le mediaquery. Questa stringa <link rel="stylesheet" type="text/css" href="css/bootstrap-ie7.css" />abilita i caratteri bootstrap.

Testato su Bootstrap 3.3.5

Link per scaricare mediaqieries.js . Link per scaricare bootstrap-ie7.css

Assicurati di collegare la fonte bootstrap separatamente

Se usi LESSoSASS non essere avido con la compilazione degli stili. Nel mio progetto ho incluso il bootstrap.min.cssmio stile principale, nella parte superiore del file, quindi dovrebbe esserci una sola richiesta per tutti gli stili.

E per questo motivo, le classi boostrap non hanno funzionato correttamente. Se aggiunto separatamente, funziona come previsto.

Ho affrontato lo stesso problema, ho provato la prima risposta ma mancava qualcosa.

Se state usando Webpack, il vostro css verrà caricato come tag di stile che non è supportato da respond.js, ha bisogno di un file, quindi assicuratevi che bootstrap sia caricato come file css

Personalmente ho usato 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")
            }
        ]
    }
}

Spero che ti possa aiutare