Twitter Bootstrap - 互联网浏览器中的导航栏问题 [英] Twitter Bootstrap - nav bar issues in internet explorer

问题描述

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

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

更新

这里是所有的CSS， bootstrap（通过sass-rails gem加入我的应用程序）。

注意：我在颜色：＃F8F8F8; 下面，我以前有＃333 。这只是我试图解决它的一个迭代。我甚至尝试改变背景颜色为＃333334 ，因为我认为我的预编译器正在改变＃333333 到＃333 （确实不知道）

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

又一次更新
$ b

使用互联网浏览器开发者工具提出的问题是：

  filter：progid：DXImageTransform.Microsoft.gradient（startColorstr ='＃FF333333'，endColorstr ='＃F2222222'，GradientType = 0）
  

这是什么？我需要它吗？ （为什么不使用相同的渐变作为firefox / chrome？）它来自Bootstrap ...我可以尝试覆盖在那里的颜色，因为无论什么原因IE解释 FF333333 为深蓝色。

解决方案

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

  filter：progid：DXImageTransform.Microsoft.gradient（startColorstr = '＃F8F8F8'，endColorstr ='＃F8F8F8'，GradientType = 0）
  

希望这会节省一些痛苦对于某人....

I am using Twitter Bootstrap in my rails app. My navbar looks perfect in Firefox / Chrome / Safari (tested chrome on both a Mac & PC). In Internet Explorer, it looks ugly! Wrong colours & everything.

Any help you can provide would be appreciated. I can post whatever code would help.

Update

Here is all of the CSS where I override anything from bootstrap (brought into my app via sass-rails gem). Hopefully it pushes us in the right direction.

Note: Where I have color:#F8F8F8; below, I used to have #333. This is just one iteration of me trying to fix it. I've even tried changing the background color to #333334 as I think that my precompiler was changing #333333 to #333 (don't know for sure though)

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

I have also tried the following (in an attempt to explicitly override anything to do with gradients from 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);
}

Yet another update

Fiddling around with the internet explorer developer tools leads me to believe the issue is this:

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

What is this? Do I need it? (Why does it not use the same gradients as firefox/chrome?) It comes from Bootstrap... I can try to override the colours in there because for whatever reason IE is interpreting FF333333 as that dark blue.

解决方案

Turns out I was able to fix this by over-riding the default filter code generated by Bootstrap. Big thanks for Nathan and Andres! To override the code I had posted above, I added the following :

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

Hope this saves some pain for somebody....

这篇关于Twitter Bootstrap - 互联网浏览器中的导航栏问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！