Twitter Bootstrap - la barre de navigation de problèmes dans internet explorer

Je suis en utilisant Twitter Bootstrap dans mon application rails. Ma navbar semble parfait dans Firefox /Chrome /Safari (testé chrome sur un Mac & PC). Dans Internet Explorer, il semble laid! Des couleurs fausses & tout.

Toute aide que vous pouvez fournir serait appréciée. Je peux poster le code que pourrait l'aider.

Mise à jour

Voici toutes les CSS où je remplace rien de bootstrap (mis dans mon application via le sass-gem rails). Nous espérons qu'il nous pousse dans la bonne direction.

Note: Lorsque j'ai color:#F8F8F8; ci-dessous, j'ai utilisé #333. C'est juste une itération de moi pour tenter d'y remédier. J'ai même essayé de changer la couleur d'arrière-plan à #333334 que je pense que mon précompilateur était en train de changer #333333 à #333 (ne sais pas pour vous mais)

/*  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 aussi essayé le suivant (dans une tentative pour remplacer explicitement quelque chose à faire avec des 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 autre mise à jour

De bidouiller avec internet explorer outils de développeur m'amène à croire que la question est: est-ce

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

Qu'est-ce que cela? Ai-je besoin? (Pourquoi ne pas utiliser les mêmes gradients comme firefox/chrome?) Il s'agit de Bootstrap... je peux essayer de remplacer les couleurs là parce que, pour quelque raison que ce soit IE est l'interprétation FF333333 que le bleu foncé.