CSS Twitter Bootstrap - Internet Explorer 中的导航栏问题
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9780464/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Twitter Bootstrap - nav bar issues in internet explorer
提问by Brandon
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.
我在我的 rails 应用程序中使用 Twitter Bootstrap。我的导航栏在 Firefox / Chrome / Safari 中看起来很完美（在 Mac 和 PC 上测试了 chrome）。在 Internet Explorer 中，它看起来很丑！错误的颜色和一切。
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.
这是我从引导程序覆盖任何内容的所有 CSS（通过 sass-rails gem 带入我的应用程序）。希望它把我们推向正确的方向。
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 #333334as I think that my precompiler was changing #333333to #333(don't know for sure though)
注意：我在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;
}
I have also tried the following (in an attempt to explicitly override anything to do with gradients from Bootstrap):
我还尝试了以下操作（试图明确覆盖与 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:
摆弄 Internet Explorer 开发人员工具让我相信问题是这样的：
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 FF333333as that dark blue.
这是什么？我需要吗？（为什么它不使用与 firefox/chrome 相同的渐变？）它来自 Bootstrap...我可以尝试覆盖那里的颜色，因为无论出于何种原因 IE 都将其解释FF333333为深蓝色。
回答by Brandon
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 :
结果我能够通过覆盖 Bootstrap 生成的默认过滤器代码来解决这个问题。非常感谢内森和安德烈斯！为了覆盖我上面发布的代码，我添加了以下内容：
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#F8F8F8', endColorstr='#F8F8F8', GradientType=0)
Hope this saves some pain for somebody....
希望这可以为某人节省一些痛苦......
回答by IAmFledge
Andres Ilich commented on the OP:
Andres Ilich 对 OP 的评论：
"Try
filter:noneon your navbar (totally forgot about that), IE uses a separate syntax to generate gradients.background-imageis still not supported by IE9 to create gradients."
“试试
filter:none你的导航栏（完全忘记了），IE 使用单独的语法来生成渐变background-image。IE9 仍然不支持创建渐变。”
After developing very painful forehead from smacking it numerous times on the desk, this is exactly what fixed the issue for me. Thanks Andres.
在桌子上多次敲击它后，额头变得非常痛苦，这正是我解决问题的方法。谢谢安德烈斯。
回答by Nathan
This happened to me too. But I found out that in CSS gradients, IE (even 9) doesn't seem to except just 3-character HEX codes. So you need to change the hex codes to 3-character instead if they aren't already (such as #CCCto #CCCCCC) so it'll work correctly in IE (only for the IE gradient CSS, not all of them).
这也发生在我身上。但是我发现在 CSS 渐变中，IE（甚至 9）似乎除了 3 个字符的 HEX 代码之外似乎没有。因此，如果尚未将十六进制代码更改为 3 个字符（例如#CCCto #CCCCCC），则需要将其更改为 3 个字符，这样它才能在 IE 中正常工作（仅适用于 IE 渐变 CSS，而不是全部）。
If you could post your CSS I could see if there are any other problems. But, my problem was that #CCCwas being interpreted as dark blue in IE.
如果您可以发布您的 CSS，我可以查看是否还有其他问题。但是，我的问题是#CCC在 IE 中被解释为深蓝色。
回答by Andres Ilich
From what i can tell you're using a solid color for your background in the top navbar, so you're only adding a background-color but not removing the background-image as well, so try to reset that too like so:
据我所知，您在顶部导航栏中使用纯色作为背景，因此您只添加了背景色但不删除背景图像，因此请尝试像这样重置它：
.navbar-inner {
background-color: #F8F8F8;
background-image:none;
border-bottom-color: #E0E0E0;
border-bottom-style: solid;
border-bottom-width: 1px;
color: #333334;
}
回答by William
This is much more simple:
这要简单得多：
.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;
}
回答by Tatenda Munenge
Internet Explorer is quite good at messing things up what I normally do is use a separate style sheet to fix up explore without messing up the rest of my site. Paste this line of code in your web pages:
Internet Explorer 非常擅长搞乱事情，我通常做的是使用单独的样式表来修复探索，而不会搞乱我网站的其余部分。将这行代码粘贴到您的网页中：
<!--[if IE]>
<link rel="stylesheet" href="styles/fix_internet_explore.css">
<![endif]-->
and modify the css to make look better on explorer, and the good part is other browsers will ignore this style sheet.
并修改 css 以使其在资源管理器上看起来更好，好处是其他浏览器将忽略此样式表。
