IE8-Problem mit Twitter Bootstrap 3

228

Ich erstelle eine Site mit dem neuen Twitter Bootstrap. Die Site sieht gut aus und funktioniert in allen erforderlichen Browsern außer IE8.

In IE8 werden anscheinend Elemente der mobilen Version angezeigt, die sich jedoch über den gesamten Bildschirm meines Desktops erstrecken. Ich glaube, das Problem, das ich habe, ist, dass Twitter Bootstrap zuerst mobil ist. Aus irgendeinem Grund wird IE8 diese Option wählen.

Ich stelle auch fest, dass die containerKlasse die CSS-Eigenschaften mit maximaler Breite nicht wie beabsichtigt einzieht. Kann jemand sehen, was ich falsch gemacht habe?

<!-- 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>
html css twitter-bootstrap internet-explorer-8 twitter-bootstrap-3 Wrayvon
quelle
1
Herzlich willkommen. Bitte posten Sie den Code auch in der Frage. Dies wird jedem helfen, der sich diese Frage in den kommenden Jahren ansieht, wenn Ihr Link nicht mehr funktioniert.
Mark Chorley
1
Vielen Dank! Ich habe es jetzt bearbeitet, Prost.
Wrayvon

Antworten:

260

Sie haben Ihr CSS von CDN (bootstrapcdn.com) erhalten. Response.js funktioniert nur für lokale Dateien. Probieren Sie Ihre Website auf IE8 mit einer lokalen Kopie von bootstrap.css aus. Oder lesen Sie: CDN / X-Domain Setup

Hinweis Siehe auch: https://github.com/scottjehl/Respond/pull/206

Aktualisieren:

Bitte lesen Sie: http://getbootstrap.com/getting-started/#support

Darüber hinaus erfordert Internet Explorer 8 die Verwendung von reply.js, um die Unterstützung von Medienabfragen zu aktivieren.

Siehe auch: https://github.com/scottjehl/Respond

Aus diesem Grund enthält die Basisvorlage die folgenden Zeilen im Kopfbereich:

<!-- 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]-->
Bass Jobsen
quelle
Bitte vergib mir, wenn ich stumpf bin ... aber respond.js??
Chris Kempen
6
Entschuldigung, ich finde immer die passende Lösung, nachdem ich lächerliche Fragen gestellt habe ... siehe getbootstrap.com/getting-started (speziell im Abschnitt "Internet Explorer 8 und 9"). :)
Chris Kempen
1
Welche Dateien sollten lokal vorhanden sein, welche können von CDN verwendet werden? bootrap.css, bootstrap.js, reply.js, html5shiv.js Dateien?
Trante
3
Eine lokale Antwort.js funktioniert nur mit einer lokalen Kopie von Bootstrap (dieselbe Domain), siehe hier github.com/scottjehl/Respond#cdnx-domain-setup
Bass Jobsen
6
Beachten Sie auch, dass Respond.js nach der CSS-Datei definiert werden muss, die die Medienabfragen enthält. Andernfalls werden sie nicht in IE8
helios456
62

Ich musste auch das folgende META-Tag setzen:

<meta http-equiv="X-UA-Compatible" content="IE=edge">
Damian
quelle
Ich benutze: <div class="left-finger-picker img-responsive">um ein Bild zu zeigen, wobei: left-finger-pickerwie folgt ist: .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; } es
reagiert
17

Ich hatte das gleiche Problem beim Übergang von Bootstrap 2 zu 3. Ich hatte bereits reply.js und html5shiv.js und habe mein Meta auf edge gesetzt. Ich hatte übersehen, dass sich der Navbar-Elementtyp von 2 auf 3 geändert hatte. In Bootstrap 2 war es nav. In Bootstrap 3 ist es jetzt Header. Um das Problem vollständig zu lösen, musste ich

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

Stellen Sie dies richtig, nachdem ich mein CSS geladen hatte:

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

und dann ändern 

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

zu

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

Oh und zum guten Teil habe ich auch hinzugefügt

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

einfach, weil es das ist, was die Bootstrap-Site selbst hat.

Giles Roberts
quelle
Ich benutze: <div class="left-finger-picker img-responsive">um ein Bild zu zeigen, wobei: left-finger-pickerwie folgt ist: .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; } es
reagiert
14

In meinem Fall verursachte das Bootstrap-minimierte CSS das Problem. Um Bootstrap 3.0.2 in IE8 (emuliert mit den F12 Developer Tools) ansprechbar zu machen, musste ich:

1 - Setzen Sie das X-UA-kompatible Flag.

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

2 - Verwenden Sie anstelle von bootstrap.min.css die nicht minimierte Datei bootstrap.css

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

3 - Fügen Sie die Datei reply.js (und html5shiv.js) hinzu.

<!--[if lt IE 9]>
  <script src="/js/html5shiv.min.js"></script>
  <script src="/js/respond.min.js"></script>
<![endif]-->
pedrusky
quelle
Auch in meinem Fall verursachte das Bootstrap-minimierte CSS das Problem in IE8.
hrvoj3e
Ich benutze <div class="left-finger-picker img-responsive">left-finger-picker.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; }
:,
6

Fügen Sie respond.jsam Ende der Seite, aber bevor Sie das bodyTag schließen, den Link zu respond.jsdiesem Code ein und führen Sie ihn in Ihrem lokalen Host aus.

https://github.com/scottjehl/Respond

Jignesh Kheni
quelle
Vielen Dank dafür, ich habe jedoch vergessen zu erwähnen, dass dies bereits in meiner Datei plugins.js enthalten ist.
Wrayvon
Wichtig ist, dass nach den Stylesheets respond.jsgeladen wird .
piotr_cz
6

Nur für den Fall. Stellen Sie sicher, dass Sie die IE-spezifischen JS-Dateien laden, nachdem Sie Ihre CSS-Dateien geladen haben.

TenJack
quelle
5

Vergessen Sie nicht, Ihre CSS-Links in das <head>zu setzen, respond.jsdas nur diese nimmt.

Engel Yordanov
quelle
5

Wie bereits erwähnt, gibt es zwei verschiedene Probleme: 1) IE8 unterstützt keine Medienabfragen. 2) reply.js, die in Verbindung mit domänenübergreifenden CSS-Dateien verwendet werden, müssen wie zuvor beschrieben enthalten sein.

Wenn Sie BootstrapCDN verwenden möchten, finden Sie hier ein funktionierendes Beispiel:

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

Stellen Sie außerdem sicher, dass Sie reply.proxy.gif, reply.min.js und response.proxy.js in lokale Verzeichnisse kopieren

Matteo Rossi
quelle
4

Nach Überprüfung:

  • DOKTYP
  • X-UA-kompatibles Meta-Tag
  • Aufnahme von html5shiv.js und reply.js (und Herunterladen der neuesten Versionen)
  • reply.js ist lokal
  • Hosting-Site von einem Webserver und nicht von File: //
  • @Import nicht verwenden
  • ...

Immer noch funktionierten col-lg, col-md und col-sm nicht. Schließlich habe ich die Verweise auf bootstrap verschoben, um vor den Verweisen auf html5shiv.js und reply.js zu stehen, und alles hat funktioniert.

Hier ist ein Ausschnitt:

<!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>
James Climer
quelle
2
Das Verschieben von bootstrap.min.css wie hier empfohlen war erforderlich, um mein Problem zu beheben. Ich habe nur die CSS-Datei verschoben, die JS-Datei wird danach noch geladen.
Chad McGrath
Das Verschieben meiner kompilierten CSS-Datei (einschließlich Bootstrap) über html5shim und das Antworten war die Lösung für mich - danke
Friendly Code
2

Aus der Erklärung geht hervor, dass IE8 die Standardversion für Sie ist und content="IE=edge"das Erstellen die Seite im höchsten Modus rendert. Um es kompatibel zu machen, ändern Sie es in content="IE=8".

Der IE8-Modus unterstützt viele etablierte Standards, einschließlich der W3C Cascading Style Sheets Level 2.1-Spezifikation und der W3C Selectors API. Es bietet auch begrenzte Unterstützung für die W3C Cascading Style Sheets Level 3-Spezifikation (Working Draft) und andere aufkommende Standards.

Der Edge-Modus weist Internet Explorer an, Inhalte im höchsten verfügbaren Modus anzuzeigen. Mit Internet Explorer 9 entspricht dies dem IE9-Modus. Wenn eine zukünftige Version von Internet Explorer einen höheren Kompatibilitätsmodus unterstützt, werden Seiten, die auf den Kantenmodus eingestellt sind, im höchsten von dieser Version unterstützten Modus angezeigt. Dieselben Seiten werden bei Anzeige mit Internet Explorer 9 weiterhin im IE9-Modus angezeigt.

Referenz Was macht <meta http-equiv = "X-UA-kompatibel" content = "IE = edge">?

Dextere
quelle
1

Musste hinzufügen - <meta http-equiv="X-UA-Compatible" content="IE=edge">

Ich habe Bootstrap 3 verwendet - hatte es auf meinem lokalen IE funktionieren.

Ich habe es live gestellt, hat im IE nicht funktioniert.

Nur Bootstrap enthält diese Codezeile nicht in ihren Vorlagen. Ich bin mir nicht sicher, warum, aber es könnte daran liegen, dass es nicht W3C-kompatibel ist.

Getsomepeaches
quelle
1

Ich habe eine Lösung für dieses Problem. Tatsächlich unterstützen IE7 und 8 das @ media nicht richtig und wenn Sie das CSS auf "col-md- *" -Klassen überprüfen und dort die Breite in Medienbreite 992px angegeben ist. Erstellen Sie einfach eine neue CSS-Datei IE, z. B.: IE.css, und fügen Sie die bedingten Kommentare hinzu. Und dann kopieren Sie einfach die für Ihr Design erforderlichen Klassen direkt mit den dortigen Medienabfragen, und schon sind Sie fertig.

Denise
quelle
0

Ich hatte genau das gleiche Problem bei der Migration von Bootstrapv2 auf Version 3.

Wenn Sie (wie ich) migriert haben, indem Sie das alte spanX durch col-sm-X ersetzt haben, müssen Sie auch col-X-Klassen hinzufügen. col-X sind die Stile, die sich außerhalb von @ media-Blöcken befinden, sodass sie ohne Unterstützung für Medienabfragen funktionieren.

Um die Containerbreite festzulegen, können Sie sie selbst außerhalb eines @ media-Blocks festlegen. Etwas wie:

.container {
  max-width: @container-tablet;
}
@import "twitter-bootstrap/less/bootstrap";
andyberry88
quelle
Ok, also herausgefunden, dass das Problem nicht zu 100% gelöst wird, da die col-X-Klassen dann für mobile Geräte verwendet werden. Zurück zum Zeichenbrett ...
andyberry88
col-X-Klassen werden niemals gestapelt, sodass Ihre Lösung auf kleinen Geräten Probleme hat. Ihre Lösung behebt auch keine Probleme mit dem @ grid-float-breakpoint, der auch von Medienabfragen abhängt, sodass Ihre Navigationsleiste nicht horizontal wird. Siehe auch: stackoverflow.com/a/17920693/1596547
Bass Jobsen
0

Ich habe das gleiche Problem in IE 10.0. Ich weiß, dass dies nicht gerade das Problem im OP ist, aber vielleicht ist es für andere nützlich.

In meinem Fall hatte ich am Anfang des Dokuments eine leere Zeile:

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

Wenn sich die leere Zeile zwischen dem DOCTYPE und dem Tag befindet, wird das Problem auch angezeigt:

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

Nachdem ich die leere Zeile entfernt habe und ohne das magische X-UA-kompatible Meta, hat IE 10 begonnen, die Site korrekt zu rendern.

Wenn Sie PHP und Smarty verwenden, gehen Sie vorsichtig mit Ihren Smarty-Kommentaren um, da diese diese problematischen Leerzeilen hinzufügen :-)

Googol
quelle
0

Mein Head Tag ist wie folgt:

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

Wenn Sie es auf lokaler Ebene versuchen möchten, versuchen Sie es über localhost oder erstellen Sie einen QS-Server, legen Sie den Inhalt fest und versuchen Sie es.

Wir benötigen reply.js für Bootstrap 3 und es funktioniert nicht auf dem lokalen Computer, wenn wir es einfach in js einfügen und im Header an HTML anhängen. Es wird angezeigt, dass der Zugriff verweigert wurde. Es funktioniert nur über den Server, da der IE Sicherheitsbeschränkungen unterliegt. : P.

sandeepnpn
quelle
0

Ich habe jeden Kommentar hier gelesen, alles versucht .. konnte ihn aber nicht mit Windows 7 - Internet Explorer 11 ( mit Dokumentmodus: IE8 ) zum Laufen bringen .

Dann kam mir der Gedanke, dass das Ausführen eines Dokumentmodus (IE8) nicht mit dem echten IE8 identisch ist, also habe ich Windows Virtual PC ( Windows 7 mit Internet Explorer 8 ) und tadaaaa installiert ... es funktioniert wie ein Zauber!

Ich habe diesen Code NUR am Ende der Seite eingefügt, damit er funktioniert:

<!-- 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>
Niesen
quelle
Respond.js und die Proxy-Dateien werden auch auf cdnjs.cloudflare.com gehostet. Unter cdnjs.com/libraries/respond.js finden Sie Dokumente / Links. Dort wird auch Bootstrap 3.03 gehostet: cdnjs.com/libraries/twitter-bootstrap
Troy Morehouse
0

Nur als Heads-Up. Ich hatte das gleiche Problem und keines der oben genannten Probleme hat es für mich behoben. Schließlich fand ich heraus, dass reply.js kein CSS analysiert, auf das über @import verwiesen wird . Ich hatte das ganze bootstrap.min.cssvia @importin mein importiert main.css.

Stellen Sie also sicher, dass Sie kein CSS haben, das Ihre Medienabfragen enthält, auf die über @import verwiesen wird .

Alex Sutu
quelle
0

Ich habe die folgenden Schritte gelöst.

(1) installiertes Respond.js-Modul für Drupal 7. (2) Lessphp-Modul für Drupal 7 in Bibliotheken anstelle des Modulordners. (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]-->

Verwenden von CDN-Bootstrap aus der Designeinstellung.

Weitere Informationen finden Sie in meinem Website-Blog für Drupal-Design und -Entwicklung unter www.devangsolanki.com

user3471193
quelle
1
Wie hängen die Schritte 1 und 2 überhaupt mit der Frage zusammen? Das Problem ist mit IE8 und Bootstrap. Drupal wird in der Frage nicht einmal erwähnt.
Adam Zuckerman
0

Wenn Sie Bootstrap 3 verwenden und alles in anderen Browsern außer IE einwandfrei funktioniert, versuchen Sie Folgendes.

<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]-->
vutbao
quelle
Hallo Phill Healy, die Lösung, die ich gepostet habe, hat für mich funktioniert. Ihr Kommentar ist nicht konstruktiv. Sie müssen mehr Details
angeben,
1
@vutbao Bootstrap funktioniert mit Versionen> IE8. Wenn Sie möchten, dass es in IE8 funktioniert, müssen Sie replyjs hinzufügen, ABER repondjs funktionieren nicht, wenn Sie Bootstrap-CDN verwenden. Nehmen Sie sich Zeit, um die Antwort von Bass Jobsen zu lesen.
Wreeecks
@Vutbao, zu sagen, dass Ihre Antwort DIE endgültige Antwort auf alle Bootstrap 3-Probleme dieser Art ist, ist nicht korrekt. Doch das sagt Ihre Antwort. Wie bwaaaaaa angibt, sind viele Probleme zu berücksichtigen. Ein weiteres Problem könnte beispielsweise sein, dass sich das Dokument im Mackenmodus usw. befindet.
Phill Healey
Punkt genommen. Ich werde mit dem Wortlaut vorsichtiger sein. Danke
Vutbao
0

Verwenden Sie diese Lösung 

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

Diese Zeichenfolge <script src="js/css3-mediaqueries.js"></script>aktiviert Medienabfragen. Diese Zeichenfolge <link rel="stylesheet" type="text/css" href="css/bootstrap-ie7.css" />aktiviert Bootstrap-Schriftarten.

Getestet auf Bootstrap 3.3.5

Link zum Herunterladen von mediaqieries.js . Link zum Herunterladen von bootstrap-ie7.css

AC1D
quelle
0

Stellen Sie sicher, dass Sie die Bootstrap-Quelle separat verknüpfen

Wenn Sie mit dem Kompilieren der Stile zu gierig sind LESSoder SASSnicht. In meinem Projekt habe ich bootstrap.min.cssmeinen Hauptstil oben in die Datei aufgenommen - daher sollte es nur eine Anfrage für alle Stile geben.

Und aus diesem Grund funktionierten die Boostrap-Klassen nicht richtig. Funktioniert wie erwartet, wenn separat hinzugefügt.

Atais
quelle
0

Ich hatte das gleiche Problem, versuchte die erste Antwort, aber es fehlte etwas.

Wenn Sie Webpack verwenden, wird Ihr CSS als Style-Tag geladen, das von reply.js nicht unterstützt wird. Es wird eine Datei benötigt. Stellen Sie daher sicher, dass Bootstrap als CSS-Datei geladen ist

Persönlich habe ich verwendet 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")
            }
        ]
    }
}

Hoffe es wird dir helfen

Sami Triki
quelle