web-dev-qa-db-fra.com

Twitter Bootstrap - Problèmes liés à la barre de navigation dans Internet Explorer

J'utilise Twitter Bootstrap dans mon application Rails. Ma barre de navigation a l'air parfaite dans Firefox/Chrome/Safari (chrome testé à la fois sur Mac et PC). Dans Internet Explorer, il semble moche ! Mauvaises couleurs et tout.

Toute aide que vous pouvez fournir serait appréciée. Je peux poster n'importe quel code qui pourrait aider.

Mettre à jour

Voici tous les CSS où je remplace n'importe quoi de bootstrap (introduit dans mon application via sass-Rails gem). Espérons que cela nous pousse dans la bonne direction.

Note: Là où j'ai color:#F8F8F8; ci-dessous, j'avais #333. Ceci est juste une itération de moi essayant de le réparer. J'ai même essayé de changer la couleur de fond en #333334 car je pense que mon précompilateur changeait #333333 en #333 (je ne sais pas avec certitude).

/*  Styling */

.navbar, .navbar-inner, .navbar-fixed-top, .container, #tabs .nav {
  border:none;
  background-image:none;
}

.navbar {

  font-size:14px;
  text-shadow:none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;

  .nav {
    float:right;
  }

  .brand {
    margin-left:30px;
    color:#333334;
    font-family: Georgia, serif
  }

  .navbar-inner {
      background-color: #F8F8F8;
      border-bottom-color: #E0E0E0;
      border-bottom-style: solid;
      border-bottom-width: 1px;
      color: #333334;
  }


}

.navbar .nav > li > a {
  text-shadow:none;
  color:#555555;
  background-color: transparent;
  cursor:pointer;

  &:hover {
    color:#E6E6E6;
  }
}

.navbar .nav .active > a, .navbar .nav .active > a:hover {
  background-color: transparent;
  color: #555555;
}

.navbar .nav .inactive > a:hover {
  color:#999999;
}

.navbar .nav > li > a.sign-in {
  color:#555555;
  padding-top:4px;
  padding-bottom:4px;
  margin-top:5px;
  margin-left:30px;
}

.navbar .nav > li > a.sign-in:hover {

  background-position: 0 0px;

}

.navbar .nav > li > a.active-button {
  background-color: #E6E6E6;
  background-image: none;
  border:1px solid #cccccc;
  border-radius:4px;
  box-shadow: none;
  cursor: pointer;
  opacity: 0.6499999761581421;
  outline-color: #555555;
  outline-style: none;
  outline-width: 0px;
  text-decoration: none;
  text-shadow: none;
  padding-top:4px;
  padding-bottom:4px;
  margin-top:5px;
}

J'ai également essayé ce qui suit (pour tenter de remplacer explicitement tout ce qui a trait aux dégradés de Bootstrap):

body {
  color:#333334;
}

.navbar-inner {
  background-image: -moz-linear-gradient(top, #F8F8F8, #F8F8F8);
  background-image: -ms-linear-gradient(top, #F8F8F8, #F8F8F8);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#F8F8F8), to(#F8F8F8));
  background-image: -webkit-linear-gradient(top, #F8F8F8, #F8F8F8);
  background-image: -o-linear-gradient(top, #F8F8F8, #F8F8F8);
  background-image: linear-gradient(top, #F8F8F8, #F8F8F8);
}

.btn-navbar {
  background-image: -moz-linear-gradient(top, #F8F8F8, #F8F8F8);
  background-image: -ms-linear-gradient(top, #F8F8F8, #F8F8F8);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#F8F8F8), to(#F8F8F8));
  background-image: -webkit-linear-gradient(top, #F8F8F8, #F8F8F8);
  background-image: -o-linear-gradient(top, #F8F8F8, #F8F8F8);
  background-image: linear-gradient(top, #F8F8F8, #F8F8F8);
}

Encore une mise à jour

En jouant avec les outils de développement d'Internet Explorer, je suis persuadé que le problème est le suivant:

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF333333',endColorstr='#F2222222', GradientType=0)

Qu'est-ce que c'est? Est-ce que j'en ai besoin? (Pourquoi n'utilise-t-il pas les mêmes dégradés que firefox/chrome?) Cela vient de Bootstrap ... Je peux essayer de remplacer les couleurs car, pour une raison quelconque, IE interprète FF333333 comme étant bleu foncé. 

cssinternet-explorerfirefoxtwitter-bootstrap
19
Brandon

Il s'avère que j'ai pu résoudre ce problème en écrasant le code de filtre par défaut généré par Bootstrap. Un grand merci à Nathan et Andres! Pour remplacer le code que j'avais posté ci-dessus, j'ai ajouté le texte suivant:

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#F8F8F8', endColorstr='#F8F8F8', GradientType=0)

J'espère que cela épargnera un peu la douleur à quelqu'un ....

22
Brandon

Andres Ilich a commenté le PO: 

"Essayez filter:none sur votre barre de navigation (vous l'avez oublié), IE utilise une syntaxe distincte Pour générer des dégradés. background-image n'est toujours pas pris en charge par IE9 pour créer des dégradés."

Après avoir développé un front très douloureux après l'avoir frappé à plusieurs reprises sur le bureau, c'est exactement ce qui a réglé le problème pour moi. Merci Andres.

14
IAmFledge

Cela m'est arrivé aussi. Mais j’ai découvert que dans les dégradés CSS, IE (même 9) ne semble pas exister que des codes HEX à 3 caractères. Vous devez donc remplacer les codes hexadécimaux par 3 caractères s'ils ne le sont pas déjà (comme #CCC en #CCCCCC) pour que cela fonctionne correctement dans IE (uniquement pour le IE gradient CSS, pas tous).

Si vous pouviez poster votre CSS, je pourrais voir s'il y a d'autres problèmes. Mais mon problème était que #CCC était interprété comme bleu foncé dans IE.

1
Nathan

D'après ce que je peux dire, vous utilisez une couleur unie pour votre arrière-plan dans la barre de navigation supérieure, de sorte que vous ne faites qu'ajouter une couleur d'arrière-plan, mais que vous ne supprimez pas non plus l'image d'arrière-plan.

  .navbar-inner {
      background-color: #F8F8F8;
      background-image:none;
      border-bottom-color: #E0E0E0;
      border-bottom-style: solid;
      border-bottom-width: 1px;
      color: #333334;
  }
1
Andres Ilich

Internet Explorer est assez efficace pour tout gâcher. Ce que je fais habituellement, c’est d’utiliser une feuille de style distincte pour corriger Explore sans explorer le reste de mon site. Collez cette ligne de code dans vos pages Web:

<!--[if IE]>
  <link rel="stylesheet" href="styles/fix_internet_explore.css">
<![endif]-->

et modifiez le fichier css pour qu’il ait une meilleure apparence dans Explorer, et le meilleur avantage est que les autres navigateurs ignoreront cette feuille de style.

0
Tatenda Munenge

C'est beaucoup plus simple:

.dropdown-menu>li>a:hover, 
.dropdown-menu>li>a:focus, 
.dropdown-submenu:hover>a, 
.dropdown-submenu:focus>a,
.dropdown-menu>li.active>a
{
   filter: none;
}
0
William