Comment réparer twitter-bootstrap sur IE ?

Question

La barre de navigation ne semble pas fonctionner correctement dans IE. Voici une capture d'écran de celle-ci dans IE.

J'ai parcouru de nombreux sujets sur le thème du bootstrap sur stackoverflow.com, mais l'"aide" qu'ils donnent aux gens ne fonctionne pas pour moi.

Après la balise body :

<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:onni.bucht@me.com">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>

Answer 1

Vous devez mettre <!DOCTYPE HTML> dans la première ligne de votre html.

Answer 2

Vous pouvez ajouter la balise méta :

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

Une brève explication sur ce qu'il est et comment il fonctionne se trouve sur ce site. lien .

Answer 3

Par souci d'exhaustivité, il convient de noter qu'avec Bootstrap 3, selon la documentation assurez-vous que votre page présente la structure suivante. Cela a résolu les problèmes que j'avais avec IE9 et v3.

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

Answer 4

Je ne suis pas sûr que cela puisse résoudre votre problème particulier, mais cela vaut la peine de le partager.

J'ai eu des problèmes avec la courroie de démarrage de Twitter dans IE. Pas de coins arrondis. Le menu de navigation ne se réduit pas. Les travées ne sont pas placées au bon endroit, même certaines images ne s'affichent pas.

Étrangement, le site fonctionne correctement dans IE lorsqu'il est exécuté par le débogueur de Visual Studio, mais c'est une fois déployé sur un serveur que le problème survient.

Essayez d'utiliser les outils de développement d'IE (le raccourci clavier est F12). Vérifiez le mode de votre navigateur et le mode document. (il se trouve en haut, à côté de la barre de menu).

Le problème s'est produit pour moi car le document était IE7 et le navigateur était compatible IE10. J'ai ajouté un en-tête http dans IIS : Nom X-UA-Compatible Valeur IE=EmulateIE9

Maintenant, la page se charge comme un document - normes IE9, compatibilité avec le navigateur IE10 et tous les problèmes précédents sont résolus.

J'espère que cela vous aidera.

-tessi

Answer 5

Internet Explorer a un nombre maximum de lignes de code pour la reconnaissance des feuilles de style.

Il s'agit d'une règle de style de barre de navigation Bootstrap qui définit la propriété float pour les éléments de la barre de navigation :

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

Cette règle dans Bootstrap 3 (probablement aussi dans les premières versions) se trouve à la ligne 5247.

Comme il est dit ici : Les limites des règles CSS d'Internet Explorer Une feuille peut contenir jusqu'à 4095 lignes.