html - 为什么此菜单在 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一个固定的宽度。这会导致 child <li>和 <a>元素正确地占据其父宽度的 100%。

IE7 中当前发生的情况是，由于 white-space: nowrap，您的下拉菜单宽度由最长子元素的长度决定。属性(property)。然后 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在您的下 zipper 接上正确设置了标志。您可以通过设置 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 应用此修复程序，否则您的子菜单将向下推一个链接太远。