Twitter Bootstrap - Internet Explorer中的导航栏问题

Question

我在我的rails应用程序中使用Twitter Bootstrap.我的导航栏在Firefox/Chrome/Safari中看起来很完美(在Mac和PC上都测试了chrome).在Internet Explorer中,它看起来很难看!错误的颜色和一切.

您可以提供的任何帮助将不胜感激.我可以发布任何有用的代码.

更新

这里是我从引导程序覆盖任何内容的所有CSS(通过sass-rails gem引入我的应用程序).希望它能把我们推向正确的方向.

注意:我曾经color:#F8F8F8;在下面,我曾经有过#333.这只是我试图修复它的一次迭代.我甚至试图改变背景颜色#333334,因为我认为我的预编译器正在改变#333333到#333(不知道是肯定的,虽然)

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

我也尝试了以下内容(试图明确覆盖任何与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);
}

又一次更新

摆弄Internet Explorer开发人员工具让我相信问题是这样的:

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

这是什么？我需要它吗？(为什么它不使用与firefox/chrome相同的渐变？)它来自Bootstrap ...我可以尝试覆盖那里的颜色,因为无论出于何种原因,IE将其解释FF333333为深蓝色.

Answer 1

事实证明,我能够通过覆盖Bootstrap生成的默认过滤器代码来解决这个问题.非常感谢Nathan和Andres!要覆盖我上面发布的代码,我添加了以下内容:

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

希望这可以为某人节省一些痛苦....

Answer 2

Andres Ilich评论OP:

"尝试filter:none使用导航栏(完全忘记了这一点),IE使用单独的语法生成渐变background-image.IE9仍然不支持创建渐变."

在桌子上打了很多次非常痛苦的前额后,这正是解决这个问题的原因.谢谢安德烈斯.