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

Question

我在我的 Rails 应用程序中使用 Twitter Bootstrap。我的导航栏在 Firefox/Chrome/Safari 中看起来很完美(在 Mac 和 PC 上测试过 chrome)。在 Internet Explorer 中，它看起来丑陋!错误的颜色和一切。

如果您能提供任何帮助，我们将不胜感激。我可以发布任何有帮助的代码。

更新

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

注意:在下面我有 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 ... .

Answer 1

事实证明，我能够通过覆盖 Bootstrap 生成的默认过滤器代码来解决这个问题。非常感谢内森和安德烈斯!为了覆盖我在上面发布的代码，我添加了以下内容:

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

希望这能为某人减轻一些痛苦......