为什么这个菜单在Firefox3.5和IE7中呈现得很差？我该如何适应？
看看这个页面上的菜单：id=96
在Chrome 5(上图)和IE8 (以下)中，它们看上去还不错。
当我将页面加载到Firefox3.5(上图)或IE7 (下面)时，有些地方出错了。
在第一种情况下，右边的箭头移动到下一行。在第二种情况下，菜单完全崩溃。
我如何使我正在开发的网站适应这一点？是因为FF3.5和IE7没有完全实现W3C标准，还是因为我的CSS没有意义？我的HTML代码已经验证了XHTML1.0严格，如这里所示。
Update -如果您没有IE7，并且您是IE7用户，您可以在这里通过IE7查看站点，而不必实际安装IE7：http://spoon.net/browsers
回答 2
Stack Overflow用户
发布于 2010-08-23 12:57:06
IE7下拉
正如Sotiris所提到的，IE7最简单的修复方法就是给ul#menu > li > ul一个固定的宽度。这将导致子<li>和<a>元素正确地占用父元素宽度的100%。
当前在IE7中发生的情况是，下拉菜单宽度是由white-space: nowrap属性中最长的子元素的长度决定的。然后，IE7没有正确地将其应用于下拉列表的<ul>，相反，下拉菜单从顶层菜单项(在您的示例中为104个像素)获取其宽度。
如果您仍然希望保留动态宽度菜单，可以使用IE7中的jQuery片段来修复它，该片段在加载时循环遍历所有链接，找到最宽的链接，并将父<ul>设置为该宽度。它应该在您的$(window).load事件处理程序中运行，就在您将所有ul#menu > li ul设置为显示:block之后：
// Nodig om de width te kunnen raadplegen
$("ul#menu > li ul").css("display", "block");
// Loop through all dropdowns and find widest child link in each
$('ul.children').each(function(){
// Find widest link in each submenu
var widest = 0;
$(this).children('li').each(function(){
if($(this).width() > widest)
widest = $(this).width();
});
// Set submenu width to widest child link
if(widest != 0)
$(this).width(widest);
});要修复居中项，还需要从此规则中删除text-align: center：
ul#menu > li{
background: url(img/menuitem.png) left top;
display: block;
float: left;
height: 36px;
margin-right: 1px;
position: relative;
width: 104px;
}最后，您需要确保在下拉链接上正确设置了hasLayout标志。可以通过按照以下规则设置zoom: 1来做到这一点：
ul#menu > li > a, ul#menu > li > ul a {
zoom: 1;
display: block;
text-decoration: none;
white-space: nowrap;
}Firefox3.5子菜单指示符
这是一个更容易解决的办法。添加ul#menu > li > ul > li a声明并按以下方式更改span.sf-sub-indicator规则：
/* Makes the link a coordinate map for span.sf-ub-indicator */
ul#menu > li > ul > li a {
position: relative;
padding-right: 10px;
}
ul#menu > li > ul > li a > span.sf-sub-indicator {
position: absolute;
top: 0;
right: 0;
}这将绝对定位到您的链接的最右边的指示器。注意，您还需要为IE7应用此修复程序，否则您的子菜单将被推下一个链接太远。
Stack Overflow用户
发布于 2010-08-18 18:49:32
将类ul#menu > li > a，ul#menu > li > ul a改为-
ul#menu > li > a, ul#menu > li > ul a
{
display:inline-block;
text-decoration:none;
white-space:nowrap;
width:95%;
}并将<span>>></span>从锚标记中移出。这在firefox上无法在IE上试用。
更新
<style type="text/css">
.menucontrol a:link, .menucontrol a:active, .menucontrol a:visited
{
border: 1px solid orange;
color: white;
background-color: orange;
}
.menucontrol a:hover
{
background-color: #fff;
color: #333;
}
.menucontrol, .menucontrol ul
{
margin: 0;
padding: 0;
list-style-type: none;
list-style-position: outside;
position: relative;
line-height: 1.5em;
}
.menucontrol a:link, .menucontrol a:active, .menucontrol a:visited
{
display: block;
padding: 0px 5px;
text-decoration: none;
}
.menucontrol li
{
float: left;
position: relative;
}
.menucontrol ul
{
position: absolute;
width: 12em;
top: 1.5em;
display: none;
}
.menucontrol li ul a
{
width: 12em;
float: left;
}
.menucontrol ul ul
{
top: auto;
}
.menucontrol li ul ul
{
left: 12em;
margin: 0px 0 0 10px;
}
.menucontrol li:hover ul ul, .menucontrol li:hover ul ul ul, .menucontrol li:hover ul ul ul ul
{
display: none;
}
.menucontrol li:hover ul, .menucontrol li li:hover ul, .menucontrol li li li:hover ul, .menucontrol li li li li:hover ul
{
display: block;
}
</style>
<body style="font-family: Consolas; font-size: 11px;">
<ul class="menucontrol">
<li><a href="#">1 HTML</a></li>
<li><a href="#">2 CSS</a></li>
<li><a href="#">3 Javascript</a>
<ul>
<li><a href="#">3.1 jQuery</a>
<ul>
<li><a href="#">3.1.1 Download</a><ul>
<li><a href="#">3.1.1 Download</a><ul>
<li><a href="#">3.1.1 Download</a></li>
<li><a href="#">3.1.2 Tutorial</a></li>
</ul>
</li>
<li><a href="#">3.1.2 Tutorial</a></li>
</ul>
</li>
<li><a href="#">3.1.2 Tutorial</a></li>
</ul>
</li>
<li><a href="#">3.2 Mootools</a></li>
<li><a href="#">3.3 Prototype</a></li>
</ul>
</li>
<script type="text/javascript">
function mainmenu()
{
$(" .menucontrol ul ").css({ display: "none" }); // Opera Fix
$(" .menucontrol li").hover(function()
{
$(this).find('ul:first').css({ visibility: "visible", display: "none" }).show(400);
}, function()
{
$(this).find('ul:first').css({ visibility: "hidden" });
});
}
$(document).ready(function()
{
mainmenu();
});https://stackoverflow.com/questions/3514926
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号