css – Twitter Bootstrap – 互联网浏览器中的导航栏问题

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

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

更新

这里是所有的CSS，我覆盖任何来自bootstrap(通过sass-rails gem引入我的应用程序)。希望它推动我们正确的方向。

注意：我在哪里有颜色：#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);
  background-image: -webkit-gradient(linear,0 0,0 100%,from(#F8F8F8),to(#F8F8F8));
  background-image: -webkit-linear-gradient(top,#F8F8F8);
  background-image: -o-linear-gradient(top,#F8F8F8);
  background-image: linear-gradient(top,#F8F8F8);
}

.btn-navbar {
  background-image: -moz-linear-gradient(top,#F8F8F8);
}

还有一个更新

互联网浏览器开发人员工具摆弄着我，相信这个问题是：

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

这是什么？我需要吗？ (为什么它不使用与Firefox / chrome相同的渐变？)它来自Bootstrap …我可以尝试覆盖那里的颜色，因为任何原因IE将解释FF333333为深蓝色。

解决方法

原来，我能够通过覆盖Bootstrap生成的默认过滤器代码来解决这个问题。非常感谢内森和安德烈斯！要覆盖上面发布的代码，我添加了以下内容：

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

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

css – Twitter Bootstrap – 互联网浏览器中的导航栏问题

解决方法

猜你在找的CSS相关文章