【问题标题】:CSS dropdown menu doesn't work in IE9 and lowerCSS 下拉菜单在 IE9 及更低版本中不起作用
【发布时间】:2014-11-19 02:05:00
【问题描述】:

其他人可以帮忙吗?我一直在阅读大量关于 IE 下拉菜单的不同问题,它们都完全不同。所以我没有我的依据。

我尝试删除所有子选择器和 rgba 值,并且基本上尽可能多地去除 CSS3。

我在尝试让 CSS 下拉菜单在 IE9 及更低版本中工作时遇到问题。

Chrome、Firefox 和 IE 10+ 都可以正确呈现此菜单。这是一个简单的悬停和显示子菜单。在 IE9 及更低版本上,下拉菜单不会出现。

我已经阅读了关于删除 -filter 和 -ms-filter,以及 z-index 和所有类型的内容,我的 CSS 都没有这些功能。

更新的 CSS:

nav {width:100%;margin:0 auto;text-transform:uppercase;position:relative;}
#toggleMenu {display:none;font-size:40px;line-height:40px;}
ul.mainmenu { margin: 0; padding: 0; position:relative;}
ul.mainmenu .small {font-size:9pt;}
ul.mainmenu ul { left: -9999em; position: absolute; width:200px; background: #222; margin: 0;     padding: 0; top: 40px;}
ul.mainmenu li.item-173 ul {width:310px;}
ul.mainmenu li.item-118 {text-transform:none;}
ul.mainmenu ul ul { background: #333; }
ul.mainmenu li { display: inline-block; vertical-align: middle; position: relative; }
ul.mainmenu li a, ul.mainmenu li span.nav-header { display: inline-block; vertical-align: middle;     padding: 8px 6px; width:100px; color: #ddd;font-size:10pt; font-weight:normal; line-height:18pt;}
ul.mainmenu ul.nav-child li a {width:200px;}
ul.mainmenu ul.nav-child li a.vehicles {width:300px;}
ul.mainmenu li span.nav-header {cursor:default;}
ul.mainmenu li a:hover,
ul.mainmenu li:hover a,
ul.mainmenu li:hover span { background: #222; }
ul.mainmenu li:hover ul, ul.mainmenu li.focus ul { top: 40px; left: 0;}
ul.mainmenu li ul li:hover ul { top: 40px; left: 300px; }
ul.mainmenu ul li { display: block; padding: 0; }
ul.mainmenu ul li a { display: block; padding: 10px 15px; color:#999; }
ul.mainmenu ul li a.vehicles {text-align:left; padding:20px 15px;}
ul.mainmenu ul li a.vehicles img {float:left;margin-right:10px;}
ul.mainmenu ul li a.vehicles .image-title-description {text-    transform:none;display:block;color:#666;}
ul.mainmenu ul li a:hover,
ul.mainmenu ul li:hover a .image-title-description { background: #333; color:#fff; text-    decoration: none; }
ul.mainmenu ul ul li a:hover { background: #ccc; }

更新:

我已将 HTML5Shiv 行添加到头部以尝试使其适用于 IE,但它并没有使下拉菜单起作用,尽管它在 IE8 中稍微改变了布局。

<!--[if lt IE 9]>
<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/r29/html5.min.js"></script>
<![endif]-->

更新:

我真的不明白这一点,因为似乎没有任何工作。无论我尝试什么,IE9 都没有区别。我已经完成了http://alistapart.com/article/hybrid 中提到的所有内容,而 IE9 没有任何不同。顶级菜单看起来不错,但下拉菜单不显示。

我想我已经明白,IE8 及更低版本不会在任何不是a 标记的东西上呈现任何:hover。这是绝对 100% 确定的吗?

【问题讨论】:

  • 你有 HTML5 shiv 吗?因为没有它,nav 元素将无法工作。如果您不这样做,则可能是 this 在稍微不同的上下文中的重复。
  • 不,我不知道,我刚刚在 Wikipedia 上读到过这方面的内容。我会尝试将其添加到head
  • 通过在 Wikipedia 上添加该行,不会对导航菜单进行任何不同的操作,下拉菜单仍然不会出现。我的 CSS 中是否缺少任何内容?
  • 用您添加的内容更新您的问题。
  • 好的,接下来是你的&lt;DOCTYPE&gt; 尝试按照this question 更新,因为你正在使用&gt; 子选择器

标签: css internet-explorer drop-down-menu


【解决方案1】:

IE9默认使用文档模式ie8。

尝试在您的&lt;head&gt; 中添加:&lt;meta http-equiv="X-UA-Compatible" content="IE=9"/&gt; 并确保使用&lt;!DOCTYPE HTML&gt;

这主要与在非元素上使用 :hover 有关。

由于这主要是古怪的浏览器的东西,这个答案主要只是一个猜测。由于 quirky-browser-stuff 通常没有明显的答案..

【讨论】:

  • 是否值得使用 Internet Explorer 的 F12 文档模式来检查这些?因为这就是我正在做的。我注意到使用 IE9 设置,它不显示,但使用 IE8,布局是错误的,但下拉菜单可以工作。这真是令人困惑
  • 好的,我已经完成了这两件事。如果我将下拉列表ul 设置为position:relative 或绝对值以外的任何其他值,我注意到下拉列表有效。下拉菜单显示,尽管整个导航栏空间被放大,因为它为下拉菜单提供了空间,即使隐藏
猜你喜欢
  • 2012-04-19
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2013-07-16
  • 2013-09-05
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多