IE 7 CSS 下拉菜单问题

发布于 2024-11-05 07:35:11 字数 807 浏览 3 评论 0原文

我有几个下拉菜单在 IE7 中给我带来了问题。我浪费了整个早上试图修复它。客户端正在使用 IE7 监控站点,因此这是重中之重。

我有一个现场演示和一个jsfiddle 演示设置。 这是我今天正在处理的实际站点,仅供参考,但演示已经隔离了问题。我留下了一些重置CSS,以防万一它们相关。

有 2 个问题:

  1. 最重要:IE7 中的顶部菜单和标题内容存在 z-index 问题。标题位于下拉菜单上方。
  2. 不太重要:顶部菜单中第一个链接和下拉菜单之间有一个小间隙,有时会导致当将鼠标从顶部链接移动到下拉菜单时下拉菜单消失。至少在 Firefox 4 和 IE 7 中会出现此问题。底部菜单中不会出现此问题。

我删除了 javascript,尝试删除任何clearfix css,削减了 css 和 html,从 html5 切换到严格的 xhtml1,使用了位置和 z-index 属性,并在此处和其他地方阅读了几篇关于 z-index IE 中的错误,但我仍然无法让这个改变。

我不关心 IE6 支持或者是否必须使用 javascript,我只需要让它在 IE7 中为客户端工作。非常感谢任何帮助。

I have a couple dropdown menus that are giving me issues in IE7. I've wasted the entire morning trying to fix it. The client is monitoring the site using IE7 so it's a top priority.

I've got a live demo and a jsfiddle demo set up. Here is the actual site I'm working on today as well just for reference, but the demos have the problems isolated. I left some of the reset css and such in case any of it is related.

There are 2 problems:

  1. Most Important: There are z-index issues with the top menu and the header content in IE7. The headings are above the dropdown.
  2. Less Important: There is a small gap in the top menu between the first link and the dropdown that sometimes causes the dropdown to disappear when moving the mouse to it from the top link. This occurs in at least Firefox 4 and IE 7. This issue doesn't occur in the bottom menu.

I removed javascript, tried removing any clearfix css, whittled down the css and html, switched from html5 to xhtml1 strict, played with the position and z-index properties, and read several articles here and elsewhere about z-index bugs in IE but I still can't get this one to budge.

I don't care about IE6 support or if I have to use javascript, I just need to get it working in IE7 for the client. Any help is greatly appreciated.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

酒儿 2024-11-12 07:35:11

在 #header 和 #nav 中添加:

position:relative;

z-index:10 //for #nav
z-index:0  //for #header

To #header and #nav add:

position:relative;

and

z-index:10 //for #nav
z-index:0  //for #header
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文