为什么此菜单在 Firefox 3.5 和 IE7 中呈现不佳？我该如何适应？

Question

查看此页面上的菜单： http://www.pieterdedecker.be/labs/vspwpg/?page_id=96

它们在 Chrome 5（上）和 IE8（下）中看起来不错。

当我将页面加载到 Firefox 3.5（上）或 IE7（下）时出现问题。

在第一种情况下，右侧的箭头已移至下一行。在第二种情况下，菜单完全崩溃了。

如何使我正在开发的网站适应这种情况？是因为 FF3.5 和 IE7 没有完全实现 W3C 标准还是仅仅因为我的 CSS 没有意义？我的 HTML 代码已通过 XHTML 1.0 Strict 验证，如 here 所示。

更新 - 如果您没有 IE7 并且您是 Windows 用户，您可以在此处通过 IE7 的眼睛查看该站点，而无需实际安装 IE7：http://spoon.net/browsers

Answer 1

IE7 下拉菜单

正如 Sotiris 所提到的，IE7 最简单的修复方法是为 ul#menu > li > ul 提供固定宽度。这将导致子 <li> 和 <a> 元素正确地占据其父元素宽度的 100%。

目前在 IE7 中发生的情况是，您的下拉菜单宽度取决于 white-space: nowrap 属性的最长子元素的长度。然后 IE7 不会正确地将其应用于下拉列表的 <ul>，而是从顶级菜单项（在您的情况下为 104 像素）获取其宽度。

如果您仍想保留动态宽度菜单，您可以在 IE7 中使用 jQuery 的 sn-p 来修复它，它会在加载时循环遍历所有链接，找到最宽的链接并将父级 <ul> 设置为该宽度.它应该在您的$(window).load 事件处理程序中运行，就在您将所有ul#menu > li ul 设置为显示：块：

// 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;
}

Firefox 3.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 应用此修复程序，否则您的子菜单将被下推一个链接。

Answer 2

将类 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();
 });