CSS 菜单下拉菜单在 IE8 中不起作用
Posted
技术标签:
【中文标题】CSS 菜单下拉菜单在 IE8 中不起作用【英文标题】：CSS menu dropdown is not working in IE8 【发布时间】：2013-09-05 09:08:06 【问题描述】：我知道对此有很多疑问，但我仍然不明白如何制作一个在 IE8 中也可以使用的 CSS 菜单下拉菜单。
我做了this sample menu.
它在所有浏览器中都运行良好，除了在 IE8 中看到this.
如果有人能向我解释什么不起作用以及如何解决，我将不胜感激。谢谢
【问题讨论】：
你能不能请个 jsfiddle 当然！这是：jsfiddle.net/itzuki87/Ak7ju 你的jsFiddle文件中html结构错误，请检查 不要在子菜单上使用margin-top: 10px;，而是尝试给它top: 100%;，因为它是绝对定位的。这是我过去多次使用过的技术，它在 IE8 中运行良好。使用固定的 HTML 和我建议的修复更新了您的演示：jsfiddle.net/rUQWy
【参考方案1】：
只需在 HTML 代码顶部插入 <!DOCTYPE html>。
【讨论】：
【参考方案2】：为了快速修复，您可以为 IE8 添加单独的 css 并仅为 IE8 添加修复。
使用以下内容添加特定于 IE8 的 CSS。
<!--[if IE 8]>
<style type="text/css">
/* css for IE 8 */
</style>
<![endif]-->
【讨论】：
如果有人选择过滤掉 IE8，更好的方法是： 。这会将 html 类设置为 ie8，您可以将 CSS 用作 .ie8 .yourSpecialDiv //css ;【参考方案3】：如果你看到，你的语法有错误
这是你的代码
<ul>
<a href="#"><li>Item 1
<ul>
<a href="#"><li>Sub-item 1</li></a>
<a href="#"><li>Sub-item 2</li></a>
<a href="#"><li>Sub-item 3</li></a>
<a href="#"><li>Sub-item 4</li></a>
<a href="#"><li>Sub-item 5</li></a>
</ul>
</li>
</a>
</ul>
应该是什么
<ul>
<li>
<a href="#">Item 1</a>
<ul>
<li><a href="#">Sub-item 1</a></li>
<li><a href="#">Sub-item 2</a></li>
<li><a href="#">Sub-item 3</a></li>
<li><a href="#">Sub-item 4</a></li>
<li><a href="#">Sub-item 5</a></li>
</ul>
</li>
</ul>
你的语法应该是 ul > li > a
您可以尝试更改代码的语法。
【讨论】：
<ul> <a href="#"><li>Sub-item 1</li></a> 不是 ul > li > a
我知道这看起来像一个 css 选择器，但我试图解释代码流，它应该如何来。
谢谢！我终于发现出了什么问题！不记得了，可能是我在进入子菜单之前设置了css，弄错了。
我知道，我的意思是你的代码流不是 ul > li > a，除了第一个 ul。以上是关于CSS 菜单下拉菜单在 IE8 中不起作用的主要内容，如果未能解决你的问题，请参考以下文章