推特引导-导航栏问题在互联网浏览器

Question

我在rails应用程序中使用Twitter Bootstrap。我的导航栏在Firefox/Chrome/Safari中看起来很完美（在Mac和PC上都测试了Chrome）。在Internet Explorer中，它看起来很难看！错误的颜色&每件事

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

更新

以下是所有CSS，我可以在其中覆盖bootstrap中的任何内容（通过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支持创建渐变。"

在我的前额因多次拍打桌子而变得非常疼痛之后，这正是我解决问题的原因。谢谢Andres。

Answer 3

这也发生在我身上。但我发现，在CSS渐变中，IE（甚至9）似乎除了3个字符的HEX代码之外没有其他功能。因此，如果十六进制代码还没有（例如#CCC到#CCCCCC），则需要将其更改为3个字符，这样它才能在IE中正常工作（仅适用于IE渐变CSS，而不是所有CSS）。

如果你能发布你的CSS，我可以看看是否还有其他问题。但是，我的问题是#CCC在IE中被解释为深蓝色。

Answer 4

根据我的判断，你在顶部导航栏中使用了纯色作为背景，所以你只添加了背景色，但没有删除背景图像，所以试着像这样重置：

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

Answer 5

Internet Explorer非常擅长把事情搞砸，我通常所做的是使用一个单独的样式表来修复浏览，而不会把我网站的其他部分搞砸。在你的网页上粘贴这行代码：

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

并修改css以使其在explorer上看起来更好，好的部分是其他浏览器将忽略此样式表。

Answer 6

这要简单得多：

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