Question

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

他们在Chrome 5（上图）和IE8（下图）中看起来没问题。

Chrome 5 IE8

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

Firefox 3.5 IE7

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

我如何调整我正在开发的网站？是因为FF3.5和IE7还没有完全实现W3C标准，还是因为我的CSS没有意义？我的HTML代码已经过验证XHTML 1.0严格，如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修复它，该片段在加载时循环遍历所有链接，找到最宽的一个并将父<ul>设置为该宽度。它应该在您的$(window).load事件处理程序中运行，就在您将所有ul#menu > li ul设置为display：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;
}

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＆gt; li> a，ul＃menu＆gt; li> ul a to -

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

为什么这个菜单在Firefox 3.5和IE7中渲染效果不佳？我该如何适应？

2 个答案: