it-swarm.com.de

Wie kann ich Twitter-Bootstrap im Internet Explorer beheben?

Die Navbar scheint im IE nicht richtig zu funktionieren. Hier ist ein Screenshot davon im IE.

screenshot

Ich habe viele Bootstrap-Themen auf stackoverflow.com durchgesehen, aber die "Hilfe", die sie den Leuten geben, funktioniert für mich nicht.

Nach body tag:

<div class="container">
    <div class="navbar navbar-fixed-top">
            <div class="navbar-inner">
                <div class="container">
                    <a class="brand" href="?id=home">OnniServer.tk</a>
                    <div class="nav-collapse">
                    <ul class="nav">
                    <li <?php if ((isset($_GET['id'])) && ($_GET['id'] == home)) { echo "class='active'"; } ?>><a href="?id=home">Home</a></li>
                    <li <?php if ((isset($_GET['id'])) && ($_GET['id'] == donate)) { echo "class='active'"; } ?>><a href="?id=donate">Donate</a></li>
                    <li <?php if ((isset($_GET['id'])) && ($_GET['id'] == about)) { echo "class='active'"; } ?>><a href="?id=about">About</a></li>
                    <li <?php if ((isset($_GET['id'])) && ($_GET['id'] == staff)) { echo "class='active'"; } ?>><a href="?id=staff">Staff</a></li>
                    <li <?php if ((isset($_GET['id'])) && ($_GET['id'] == vote)) { echo "class='active'"; } ?>><a href="?id=vote">Vote</a></li>
                    <li class="dropdown">
                        <a href="" class="dropdown-toggle" data-toggle="dropdown">Play now: <b class="caret"></b></a>
                            <ul class="dropdown-menu">
                                <li><a href="minecraft">In browser</a></li>
                                <li><a href="http://minecraft.net">Buy it now</a></li>
                                <li><a href="#">No link for crack</a></li>
                            </ul>
                    </li>
                    <li class="dropdown">
                        <a href="" class="dropdown-toggle" data-toggle="dropdown">Perms for: <b class="caret"></b></a>
                            <ul class="dropdown-menu">
                                <li><a href="?id=citizen">Citizen(s)</a></li>
                                <li><a href="?id=vip">VIP(s)</a></li>
                                <li><a href="?id=vipplus">VIP+(s)</a></li>
                                <li><a href="?id=modjr">Jr. Moderator(s)</a></li>
                                <li><a href="?id=mod">Moderator(s)</a></li>
                                <li><a href="?id=admin">Admin(s)</a></li>
                                <li><a href="?id=owner">Owner</a></li>
                            </ul>
                    </li>
                    <li class="dropdown">
                        <a href="" class="dropdown-toggle" data-toggle="dropdown">Mail to: <b class="caret"></b></a>
                            <ul class="dropdown-menu">
                                <li><a href="mailto:[email protected]">Onni (server Owner)</a></li>
                            </ul>
                    </li>
                    <script>
                        $('.dropdown-toggle').dropdown()
                    </script>
                    </ul>
                    </div>
                </div>
            </div>
    </div>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <div class="hero-unit">
        <style "text/css">
        </style>
        <?php
        if (((isset($_GET['id'])) &&($_GET['id'] == home)) || (!isset($_GET['id']))) { include('home.php'); };
        if ((isset($_GET['id'])) && ($_GET['id'] == donate)) { include('donate.php'); };
        if ((isset($_GET['id'])) && ($_GET['id'] == about)) { include('about.php'); };
        if ((isset($_GET['id'])) && ($_GET['id'] == staff)) { include('staff.php'); };
        if ((isset($_GET['id'])) && ($_GET['id'] == vote)) { include('vote.php'); };
        if ((isset($_GET['id'])) && ($_GET['id'] == citizen)) { include('permissions/citizen.html'); };
        if ((isset($_GET['id'])) && ($_GET['id'] == vip)) { include('permissions/vip.html'); };
        if ((isset($_GET['id'])) && ($_GET['id'] == vipplus)) { include('permissions/vipplus.html'); };
        if ((isset($_GET['id'])) && ($_GET['id'] == modjr)) { include('permissions/modjr.html'); };
        if ((isset($_GET['id'])) && ($_GET['id'] == mod)) { include('permissions/mod.html'); };
        if ((isset($_GET['id'])) && ($_GET['id'] == admin)) { include('permissions/admin.html'); };
        if ((isset($_GET['id'])) && ($_GET['id'] == owner)) { include('permissions/owner.html'); };
        ?>
    </div>
</div>
40
Onni Bucht

Sie müssen <!DOCTYPE HTML> in die erste Zeile Ihrer HTML-Datei eingeben.

65

Sie können das Meta-Tag hinzufügen:

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

Eine kurze Erklärung dazu, was es ist und wie es funktioniert, finden Sie unter link

51
tux

Der Vollständigkeit halber sei darauf hingewiesen, dass mit Bootstrap 3 gemäß den docs die folgende Struktur in Ihrer Seite sichergestellt ist. Es wurden Probleme gelöst, die ich mit IE9 und V3 hatte.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<!-- content -->
</body>
</html>
19
SteveChapman

Ich bin nicht sicher, ob das Problem behoben werden kann, aber es lohnt sich trotzdem, es zu teilen.

Ich hatte Probleme mit Twitter Boot Strap in IE. Keine abgerundeten Ecken Das Navigationsmenü wird nicht ausgeblendet. Spannen nicht an der richtigen Stelle, auch wenn einige Bilder nicht angezeigt werden.

Seltsamerweise funktioniert die Site in IE einwandfrei, wenn sie durch den Visual Studio-Debugger ausgeführt wird. Sobald sie auf einem Server bereitgestellt wurde, tritt das Problem auf.

Versuchen Sie es mit den Entwicklertools IE (F12 ist eine Tastenkombination) Überprüfen Sie Ihren Browsermodus und Ihren Dokumentmodus. (oben in der Menüleiste oben)

Das Problem trat für mich auf, da das Dokument IE7 war und der Browser IE10-kompatibel war . Ich habe einen http-Header in IIS hinzugefügt: Name X-UA-kompatibel Wert IE = EmulateIE9

Nun wird die Seite als Dokument geladen - IE9-Standards, Browser-IE10-Kompatibilität und alle vorherigen Probleme wurden behoben.

Hoffe das hilft.

-tessi

6
tessi

Diese beiden Skripts müssen für den IE hinzugefügt werden

<script src="http://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="http://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
6
Palani Kumar

Wenn Sie sich im Intranet befinden und die Einstellungen auf den Kompatibilitätsmodus gesetzt sind, reichen die richtigen Doctypes und respons.js nicht aus.

Unter diesem Link finden Sie weitere Informationen: Erzwingen Sie den IE8- oder IE9-Dokumentmodus auf Standards und sehen Sie die Antwort von Ralph Bacon.

Es wäre das Gleiche wie dieses:

<!DOCTYPE html>
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
4
Emperor Krauser

Ich hatte das gleiche Problem und keine der anderen Antworten funktionierte. Mein Problem war ein seltsames Problem, bei dem IE9 keine Verbindung zu beliebigen https -Seiten herstellen konnte. Daher benutzte ich die Online-Bootstrap-Dateien maxcdn wie

https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css

keines dieser css und js wurde angewendet. Beim Einstieg in die Registerkarte "Erweitert" der Internet Explorer-Optionen habe ich überprüft, dass das Aktivieren der Option "TLS 1.0 verwenden" das Problem mit den https-Sites und -Dateien verursacht hat. Sobald die Bootstrap-Seite überprüft wurde, wurde sie wie erwartet formatiert.

Wie andere bereits erwähnt haben, verwenden Sie den richtigen Doctype weiter unten (vielleicht funktioniert ein gültiger html4-Doctype, aber wenn Sie neu beginnen, können Sie auch html5 verwenden.)

Die Antwort js und html5 Shim (falls verwendet) beziehen sich auf IE8. IE9 nicht benötigt das. Der folgende Code verwendet die Standardmethode für das Targeting von ie8 und darunter.

--Kunst

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- HTML5 shim and Respond.js for 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/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body>
<!-- content -->
</body>
</html>
3
aamarks

Ich hatte dieses Problem vor kurzem. Ich habe diese Einstellungen geändert. Und es hat für mich funktioniert. !

verify these settings

2
chineerat

Internet Explorer verfügt über eine maximale Anzahl von Codezeilen für die Stylesheet-Erkennung. 

Dies ist die Bootstrap-Navbar-Stilregel, mit der die Float-Eigenschaft für Navbar-Elemente festgelegt wird:

.navbar-nav > li {
    float: left;
}

Diese Regel in Bootstrap 3 (wahrscheinlich auch in früheren Versionen) befindet sich in Zeile 5247. 

Wie hier gesagt: Die CSS-Regellimits von Internet Explorer , ein Blatt kann bis zu 4095 Zeilen enthalten.

2
Guzman Iglesias

Ich hatte ein ähnliches Problem ... In meinem Fall habe ich beim Betrachten des CSS einen position: initial gefunden.

Nach einiger Recherche fand ich heraus, dass der mobile IE Browser dies nicht unterstützt.

Ich habe stattdessen einfach einen position: relative eingegeben und alles hat gut funktioniert.

1
Renato Oliveira

Ich hatte auch ähnliche Probleme. Ich füge die folgende Codezeile in den Kopf meiner Layoutdatei ein und alles scheint in Ordnung zu sein.

<meta http-equiv="X-UA-Compatible" content="IE=9">
1
Jason

Wenn Sie ein responsives Layout verwenden, fügen Sie diese js in Ihren Code ein: https://github.com/scottjehl/Respond

0
rizidoro

Bitte legen Sie die Seiten in localhost und versuchen Sie es

0
RiyAs MuhaMmed