web-dev-qa-db-fra.com

Comment puis-je réparer Twitter-bootstrap sur IE?

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

screenshot

J'ai parcouru de nombreux sujets sur bootstrap sur stackoverflow.com, mais "l'aide" qu'ils fournissent aux gens ne fonctionne pas pour moi.

Après la balise du corps:

<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>
twitterinternet-explorer-9twitter-bootstrap
40
Onni Bucht

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

65
Facundo Pedrazzini

Vous pouvez ajouter la balise Meta:

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

Une brève explication de ce que c'est et de son fonctionnement se trouve sur ce link . 

51
tux

Juste pour être complet - notons qu'avec Bootstrap 3, conformément à la documentation , assurez-vous de la structure suivante sur votre page. Il 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>
19
SteveChapman

Je ne sais pas si cela résoudra votre problème, 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 s'effondre pas. Les plages ne sont pas au bon endroit, même si certaines images ne s'affichent pas.

Étrangement, le site fonctionne bien dans IE lorsqu'il est exécuté via le débogueur Visual Studio, une fois déployé sur un serveur à l'origine du problème.

Essayez d’utiliser les outils de développement IE (F12 est un raccourci clavier) Vérifiez le mode de votre navigateur et celui du document. (c'est 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 avec IE10. J'ai ajouté un en-tête http dans IIS:

Maintenant, la page se charge en tant que document: normes IE9, compatibilité du navigateur IE10 et tous les problèmes précédents résolus.

J'espère que cela t'aides.

-tessi

6
tessi

Besoin d'inclure ces deux scripts pour IE

<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

Si vous vous trouvez dans l'intranet et que les paramètres sont définis sur le mode de compatibilité, les doctypes et répondeurs appropriés ne suffisent pas.

Veuillez vous référer à ce lien pour plus d'informations: Forcer le mode de document IE8 ou IE9 aux normes et voir la réponse de Ralph Bacon.

Ce serait comme ça:

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

J'ai eu le même problème et aucune des autres réponses n'a fonctionné. Mon problème était étrange: IE9 n’était pas en mesure de se connecter à un site https, c’est pourquoi, depuis que j’utilisais les fichiers bootstrap maxcdn en ligne tels que,

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

aucun de ces css et js était appliqué. En accédant à l'onglet Options avancées des options d'Internet Explorer, j'ai vérifié que le fait de ne pas avoir coché la case "utiliser TLS 1.0" était à l'origine du problème avec les sites et les fichiers https et, une fois coché, ma page de démarrage était formatée comme prévu.

Comme d’autres l’ont déjà noté, utilisez le doctype approprié ci-dessous (peut-être un doctype valide en html4 fonctionnera-t-il, mais si vous recommencez, utilisez également html5.)

Les réponses js et html5 shim (si vous utilisez cela) sont pour IE8. IE9 n'est pas besoin de ça. Le code ci-dessous utilise la méthode standard de ciblage ie8 et inférieure.

--Art

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

J'ai eu ce problème récemment. J'ai fait ces réglages changer. Et cela a fonctionné pour moi. !

verify these settings

2
chineerat

Internet Explorer dispose d'un nombre maximal de lignes de code pour la reconnaissance des feuilles de style. 

C'est la règle de style Bootstrap navbar 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) est à la ligne 5247. 

Comme il est dit ici: Limites des règles CSS d'Internet Explorer , une feuille peut contenir jusqu'à 4095 lignes.

2
Guzman Iglesias

J'avais un problème similaire . Dans mon cas, en regardant le CSS, j'ai trouvé un position: initial.

Après quelques recherches, j'ai découvert que le navigateur mobile IE ne le prend pas en charge.

J'ai simplement mis un position: relative à la place et tout a bien fonctionné.

1
Renato Oliveira

J'ai eu des problèmes similaires aussi. Je mets la ligne de code suivante dans la tête de mon fichier de mise en page et tout semble aller pour le mieux.

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

Si vous utilisez une disposition sensible, essayez d’inclure ce js dans votre code: https://github.com/scottjehl/Respond

0
rizidoro

S'il vous plaît mettre les pages dans localhost et essayez

0
RiyAs MuhaMmed