IE8中部分隐藏了Bootstrap导航栏下拉 - 为什么?

时间:2015-01-21 10:28:43

标签: jquery html css twitter-bootstrap

我正在开发一个项目,在新的浏览器中一切正常,但在我测试的IE8中没有。

下拉菜单有效,但隐藏在名为<div class=".container.justering">

的主要内容区域后面

请参阅此处的代码: http://blanken.redigering.net/tester.html

在Chrome中,下拉菜单效果很好。在IE 11中它很棒。在IE8中,它隐藏在主容器后面。

看起来<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">的行为与overflow:hidden;相似但却没有。

2 个答案:

答案 0 :(得分:1)

z-index添加到Bootstrap .dropdown类(只需在CSS文件中覆盖它)就可以解决您的问题。

请注意,z-index不适用于静态元素,例如.navbar-inverse

必须定位元素,例如相对或绝对。

同样z-index值不应该是随机的,而应该是它需要的高/低。

如果这不能解决问题,我记得曾经读过某个地方IE8有CSS filter属性的问题,它在整个Bootstrap css中用于渐变等。

解决方案是添加filter:none!important;到.navbar.navbar-inner.dropdown等元素。

这是where I read about it

我希望它有所帮助。

答案 1 :(得分:0)

来自Bootstrap:

  

也支持Internet Explorer 8和9,但请注意,这些浏览器不完全支持某些CSS3属性和HTML5元素。此外,Internet Explorer 8需要使用Respond.js来启用媒体查询支持。

Bootstrap link

这可能与css3支持或主要是因为internett explorer8已过时。

如果您需要针对IE 8进行特定修复:

<!--[if IE 8]>
    <link rel="stylesheet" type="text/css" href="ie7-and-down.css" />
<![endif]-->

挪威使用IE 8正在快速下降(HALLELUJAH):

Browser support

我无法测试您的问题,因为我无法访问IE 8。