Почему это меню плохо отображается в 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, как показано здесь .

Обновление - Если у вас нет IE7 и вы являетесь пользователем Windows, вы можетепосмотрите на сайт глазами IE7, не устанавливая IE7: http://spoon.net/browsers

Answer 1

IE7 Dropdown

Как упомянул 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;
}

Индикатор подменю 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 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();
 });