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

【问题标题】：Twitter Bootstrap - nav bar issues in internet explorerTwitter Bootstrap - Internet Explorer 中的导航栏问题
【发布时间】：2012-04-04 13:06:14
【问题描述】：

我在我的 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 解释为深蓝色。

【问题讨论】：

贴一些代码让我们看看。
会抛出一堆相关的 CSS ......希望有帮助！
@AndresIlich 有什么想法吗？还在苦苦挣扎！
在您的导航栏上尝试filter:none（完全忘记了），IE 使用单独的语法来生成渐变。 IE9 仍然不支持background-image 创建渐变。
bootstrap 中的哪个文件有违规行 'filter:progid...'？

标签： css internet-explorer firefox twitter-bootstrap

【解决方案1】：

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

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

【讨论】：

感谢您回复我。我试试看！
不幸的是仍然无法让它工作（设法让它变得有点黑......）将发布一些代码。
@Brandon 这很奇怪。我的全是蓝色和丑陋的，看起来像你的（实际上它看起来和你的一模一样），但我把它改成了更长的版本，它工作了。现在在 IE 中看起来如何？
不幸的是，它仍然看起来很糟糕......将发布更新的捕获。还有其他想法吗？
@brandon - 您是否尝试过暂时将其设置为黑白以查看是否有效？也是您为标题发布的所有 CSS 还是还有更多？如果是这样，请同时发布。

【解决方案2】：

据我所知，您在顶部导航栏中使用纯色作为背景，因此您只是添加了背景颜色，但也没有删除背景图像，因此请尝试将其重置为所以：

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

【讨论】：

【解决方案3】：

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

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

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

【讨论】：

你帮我减轻了很多痛苦。显然我有这行：filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#'ffffff, endColorstr='#'e5e5e5, GradientType=0);，其中'引号只包含'#'符号而不是全色。将其更改为例如 '#ffffff' 使其工作。
我仍然在使用 dotless 的 Bootstrap 2.1.0 中遇到这个问题，结果证明问题是 dotless 的。自从更新到 1.3.1.0 后，问题就消失了（dotless 正在为 IE 正确格式化过滤器中的颜色）
我认为这里有一个更好的答案：stackoverflow.com/questions/14088485/…
感谢它救了我。 :)

【解决方案4】：

Andres Ilich 评论 OP：

“在你的导航栏上试试filter:none（完全忘记了），IE 使用单独的语法来生成渐变。 background-image 仍然没有 IE9 支持创建渐变。”

由于在桌子上多次拍打额头而出现非常疼痛的前额，这正是为我解决问题的原因。谢谢安德烈斯。

【讨论】：

我真的认为他们应该让默认的 CSS 少一些参与。对于一个应该有助于加速 Web 开发的框架，他们肯定会让样式变得很痛苦。那个小渐变真的对默认样式如此重要，以至于他们需要为主导航的自定义添加如此多的复杂性吗？
谢谢，你为我节省了很多时间！

【解决方案5】：

这要简单得多：

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

【讨论】：

【解决方案6】：

Internet Explorer 非常擅长搞乱我通常做的事情是使用单独的样式表来修复浏览，而不会弄乱我网站的其余部分。将这行代码粘贴到您的网页中：

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

修改css让浏览器看起来更好看，好在其他浏览器会忽略这个样式表。

【讨论】：