it-swarm.com.de

Twitter Bootstrap - Probleme mit der Navigationsleiste im Internet Explorer

Ich verwende Twitter Bootstrap in meiner Rails-App. Meine Navbar sieht perfekt aus in Firefox/Chrome/Safari (getestetes Chrome auf einem Mac & PC). Im Internet Explorer sieht es hässlich aus! Falsche Farben und alles.

Jede Hilfe, die Sie leisten können, wäre dankbar. Ich kann den Code posten, der helfen würde.

Aktualisieren

Hier ist das gesamte CSS, in dem ich alles von Bootstrap überschreibe (in meine App über Sass-Rails gem eingebracht). Hoffentlich drängt es uns in die richtige Richtung.

Hinweis: Wo ich color:#F8F8F8; unten habe, hatte ich #333. Dies ist nur eine Wiederholung von mir, die versucht, das Problem zu beheben. Ich habe sogar versucht, die Hintergrundfarbe in #333334 zu ändern, da ich glaube, dass mein Precompiler #333333 in #333 geändert hat (ich weiß es nicht genau).

/*  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;
}

Ich habe auch folgendes versucht (in einem Versuch, alles, was mit Steigungen von Bootstrap zu tun hat, explizit zu überschreiben):

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);
}

Noch ein weiteres Update

Wenn ich mit den Entwicklertools von Internet Explorer herumspiele, glaube ich, dass das Problem das Folgende ist:

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

Was ist das? Brauche ich das? (Warum verwendet es nicht dieselben Farbverläufe wie Firefox/Chrome?) Es kommt von Bootstrap ... Ich kann versuchen, die Farben dort zu überschreiben, da IE aus irgendeinem Grund FF333333 als dunkelblau interpretiert. 

19
Brandon

Es stellte sich heraus, dass ich das Problem beheben konnte, indem der von Bootstrap generierte Standard-Filtercode überschrieben wurde. Vielen Dank für Nathan und Andres! Um den oben genannten Code zu überschreiben, habe ich Folgendes hinzugefügt:

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

Ich hoffe, das erspart jemandem Schmerzen ...

22
Brandon

Andres Ilich kommentierte das OP: 

"Versuchen Sie filter:none in Ihrer Navbar (völlig vergessen), IE verwendet eine separate - Syntax, um Verläufe zu erzeugen. background-image wird noch nicht Zur Erstellung von Verläufen unterstützt."

Nachdem ich eine sehr schmerzhafte Stirn entwickelt hatte, nachdem er sie mehrmals auf den Schreibtisch geschlagen hatte, war dies genau das, was das Problem für mich behoben hat. Danke, Andres.

14
IAmFledge

Das ist mir auch passiert. Ich habe jedoch herausgefunden, dass IE (sogar 9) in CSS-Farbverläufen nicht nur 3-stellige HEX-Codes enthält. Sie müssen also die Hex-Codes in 3-stellige Zeichen ändern, wenn sie nicht bereits vorhanden sind (z. B. #CCC in #CCCCCC), damit sie in IE richtig funktionieren (nur für IE). _ Gradienten-CSS, nicht alle).

Wenn Sie Ihr CSS posten könnten, könnte ich sehen, ob es andere Probleme gibt. Mein Problem war jedoch, dass #CCC im IE als dunkelblau interpretiert wurde.

1
Nathan

Soweit ich das beurteilen kann, verwenden Sie in der oberen Navigationsleiste eine einfarbige Farbe für Ihren Hintergrund. Sie fügen also nur eine Hintergrundfarbe hinzu, entfernen aber nicht auch das Hintergrundbild. Versuchen Sie daher, auch diese zurückzusetzen:

  .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 ist ziemlich gut darin, die Dinge durcheinander zu bringen. Normalerweise benutze ich ein separates Stylesheet, um das Erforschen zu verbessern, ohne den Rest meiner Website durcheinander zu bringen. Fügen Sie diese Codezeile in Ihre Webseiten ein:

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

und ändern Sie die CSS, damit sie im Explorer besser aussehen. Der gute Teil ist, dass andere Browser dieses Stylesheet ignorieren.

0
Tatenda Munenge

Das ist viel einfacher:

.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