Internet Explorer中的CSS悬停下拉菜单 [英] CSS hover drop-down menu in Internet Explorer
问题描述
尝试创建一个在Internet Explorer中看起来和在Firefox中一样好的网站是一项非常艰巨的任务.但是，IE中至少存在一个错误，这对我们的团队特别困扰.下拉菜单在Firefox和Chrome中显示正常，但在资源管理器中看起来完全不正常.
Trying to create a website that looks as good in Internet Explorer as it does in Firefox is an incredibly difficult task. However, there is at least one bug in IE that is particularly perplexing for our team. The drop-down menu displays fine in Firefox and Chrome, but looks completely whack in Explorer.
此图分别显示了在Firefox和Explorer中浏览时菜单的外观.请单击链接以查看图像.
This image shows what the menu's look like while browsing in Firefox and Explorer, respectively. Please click the link to see the image.
http://i1025.photobucket.com/albums/y315 /brycewwilson/firefox-explorerscreenshot.png
请帮助！尝试使用CSS格式的菜单时，还有其他人遇到此问题吗?菜单使用无序列表和列表项，并使用CSS悬停显示子菜单内容.
Please help! Has anyone else encountered this problem while trying to use a menu formatted in CSS? The menu uses unordered lists and list items, and uses CSS hover to display the sub-menu contents.
提前谢谢！
更新: 出于某种原因，该菜单在IE中可以单独使用，但在我们的网站上仍然无法使用.令人困惑...
UPDATE: For some reason, the menu worked on its own in IE, but it still doesn't work on our site. Puzzling...
这是代码.
html如下:
<head>
<link rel="stylesheet" type="text/css" href="old_hover_menu.css"/>
</head>
<body>
<ul id="topDropDownMenu">
<li id="aboutDropDown"><a href="#">About</a>
</li>
<li id="contactDropDown"><a href="#">Contact</a>
<ul>
<li><a href="#">Form</a></li>
<li><a href="#">Information</a></li>
</ul>
</li>
</ul>
</body>
这是CSS:
#topDropDownMenu {position:relative;background: no-repeat 100% 50%;width:50em;max-width:100%;float:left;}
#topDropDownMenu li ul {
width:11em !important;/* leaves room for padding */
cursor:default;
position:absolute;
height:auto;
display:none;
left:-10px;
padding:1px 10px 10px 10px;
background:url(/img/clear.gif);
}
/* All LIs */
#topDropDownMenu li {
position:relative;
width:8.3em;
max-width:16.5%;
cursor:pointer;
float:left;
list-style-type:none;
font-weight:bold;
border-style:solid;
border-width:1px;
border-color:#222;
text-align:center;
-moz-border-radius:8px 8px 0px 0px;
}
/* sub-menu LIs */
#topDropDownMenu li ul li {
width:8.3em/*FF*/;
padding:0;
border:none;
max-width:100%;
border:1px solid #333;
border-top:none;
-moz-border-radius:0px 0px 0px 0px;
}
/* All anchors */
#topDropDownMenu li a {
cursor:pointer !important;
color:#666;
text-decoration:none;
display:block;
float:left;
height:2em;
line-height:2em;
width:100%;
-moz-border-radius:8px 8px 0px 0px;
}
/* sub-menu Anchors */
#topDropDownMenu li ul li a {
width:8.3em/*FF*/;
position:relative !important;
cursor:pointer !important;
white-space:nowrap;
line-height:1.7em;
height:1.7em;
font-weight:normal;
color:#666;
background-position:0 50% !important;
-moz-border-radius:0px 0px 0px 0px;
}
/*hover*/
#topDropDownMenu li a:hover,
#topDropDownMenu li a:focus,
#topDropDownMenu li a:active {color:#000;background:#fff}
/* display and z-index for the sub-menus */
#topDropDownMenu li:hover ul,
#topDropDownMenu li.msieFix ul {display:block;z-index:10;top:2em !important;}
#topDropDownMenu li#aboutDropDown {z-index:2;}
#topDropDownMenu li#contactDropDown {z-index:1;}
.aboutDropDown #topDropDownMenu li#aboutDropDown ul,
.contactDropDown #topDropDownMenu li#contactDropDown ul { display:block;top:-1000px}
#aboutDropDown a {background-color:#b9e075;}
#contactDropDown a {background-color:#f7c472;}
#topDropDownMenu li.msieFix a {}
.aboutDropDown #topDropDownMenu li#aboutDropDown ul li a:focus,
.aboutDropDown #topDropDownMenu li#aboutDropDown ul li a:active,
.contactDropDown #topDropDownMenu li#contactDropDown ul li a:focus,
.contactDropDown #topDropDownMenu li#contactDropDown ul li a:active,
{position:absolute !important;top:1028px !important;}
推荐答案
没有看到一些HTML和CSS，就没有办法为您提供特定的解决方案.但是，有些技术可用于缓解IE错误.
Without seeing some HTML and CSS there isn't a way to give you a specific solution. However, there are some techniques that can be used to help alleviate IE bugs.
- 浮动您的
<li>，即使它们不是水平的. - 将
display: inline添加到现在浮动的<li>中. - 将
width分配给您的<li>或其中的<a>标签. - 可能将
position: relative添加到<li>中. - 在
<li>内的<a>标记中添加display: block. - 将
width: 100%或zoom: 1(或触发hasLayout的其他任何内容)添加到顶级<ul>.
- Float your
<li>s, even if they aren't horizontal. - Add
display: inlineto the now floated<li>s. - Assign a
widthto your<li>s or to the<a>tag within. - Potentially add
position: relativeto the<li>s. - Add
display: blockto the<a>tags within the<li>s. - Add
width: 100%orzoom: 1(or anything else that triggers hasLayout) to the top level<ul>.
以上某些技巧通常会使您处于更好的位置.可能有必要进行进一步的调整，但希望IE的性能会更好.
Some of the above techniques will usually put you in a better position. Further tweaks may be necessary but hopefully IE will behave better.
这篇关于Internet Explorer中的CSS悬停下拉菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
