【问题标题】:Internet Explorer 9 doesn't display CSS Dropdown Menu's correctly...?Internet Explorer 9 不能正确显示 CSS 下拉菜单...?
【发布时间】:2012-10-02 15:59:39
【问题描述】:

我正在为 HTML 网页开发基于 CSS 的下拉导航菜单。它在 Google Chrome、Mozilla Firefox 和 Mobile Safari 下完美呈现,问题在于 Internet Explorer 9。它不是显示为条形,而是显示带有项目符号的所有内容,就像没有分配给它的 CSS 脚本一样。我的 HTML 是标准的

    <link href="menu.css" rel="stylesheet" />

    <nav><ul><li><ul>ITEM_NAME<a href="LINKS"></ul></li></ul></nav>

格式。

我的 CSS 脚本如下所示:

    nav {
margin: auto; 
text-align: center;
    }

    nav ul ul {
display: none;
    }

nav ul li:hover > ul {
    display: block;
}


    nav ul {
background: #000;
list-style: none;
position: relative;
display: inline-table;
    }
nav ul:after {
    content: ""; clear: both; display: block;
}

nav ul li {
    float: left;
}
    nav ul li:hover {
        background: #FF6600;
    }
        nav ul li:hover a {
            color: #fff;
        }

    nav ul li a {
        display: block; padding: 10px 10px;
        color: #fff; text-decoration: none;
    }


nav ul ul {
    background: #000; padding: 0;
    position: absolute; top: 100%;
}
    nav ul ul li {
        float: none; 
        border-top: 1px solid #333;
                    border-left: 2px solid #333;
                    border-right: 2px solid #333;
        border-bottom: 1px solid #333; 
                    position: relative;
    }
        nav ul ul li a {
            padding: 10px 10px;
            color: #fff;
        }   
            nav ul ul li a:hover {
                background: #FF6600;
            }

nav ul ul ul {
    position: absolute; left: 100%; top:0;
}

我需要做什么才能在 Internet Explorer 9 中正确渲染有什么想法吗? :) 谢谢,肖恩。

【问题讨论】:

  • 我在 IE9 中测试它,在 Windows 7 64 位上。我想如果它不能在 9 上运行,它肯定不能在 IE8 或 7 上运行
  • 你会这么认为,但是 IE8应该在所有元素上都支持:hover

标签: html css internet-explorer


【解决方案1】:

并非所有版本的 IE 都能理解nav 标签。此处详细介绍了一些解决方法:

html5 new elements (header, nav, footer, ..) not working in IE

【讨论】:

  • 从该链接开始,如果您必须依赖非 JavaScript IE,您也可以不使用新元素。
  • 这是 IE 9,所以它应该。
【解决方案2】:

我说过这可能是 IE 不满意的 display: inline-table;。你可以改用 inline-block 吗?然后摆脱这些点,list-style: none

【讨论】:

  • 这里的问题是,这是我学校的网页,它需要能够在旧的 IE7/8 Windows XP 机器上呈现......或者任何其他地方,或者我会尽快这样做.试过display: inline-table;已经有list-style: none了,还是坚持显示为列表。
  • 另外,我是新人,第一部分是针对第一条评论的.. oops XD
  • 如果它需要在任何设备上呈现,那么 JavaScript 解决方案可能更合适。 CSS 可以做很多奇妙的事情,但仅限于现代浏览器。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2011-04-04
  • 2023-04-10
相关资源
最近更新 更多