Мой макет страницы ломается в IE7, прав сам по себе, если я наведите курсор мыши на элемент меню

Question

Как вы можете видеть, если вы перейдете по ссылке ниже в IE7 / AOL, раскладка сломается, если вы измените размер окна. Тем не менее, щелкните вкладку меню products, и она станет права. Я понятия не имею, почему или как это исправить, и это выглядит небрежно. При изменении размера страницы логотип и тег хлебной крошки остаются там, где они должны быть, но мое горизонтальное навигационное меню и все, что находится под хлебной крошкой, заканчиваются примерно на 20-30 пикселей вправо. При обновлении страницы, изменении страницы или открытии выпадающего меню все возвращается к правильному выравниванию.

текст ссылки

Answer 1

Чтобы исправить некорректно отображаемые (в ie7) элементы div, которые исправляются после наведения на что-то другое, отключения мыши или любого другого странного события, используйте следующий jQuery:

    if ($("html").hasClass("ie7")){
        var tempHolder = $("#ajaxresults").html();
        $("#ajaxresults").html(tempHolder);
    }

Логика довольно проста, и я думаю, вы могли бы сделать это так же легко с помощью JavaScript "innerHTML". Просто перепишите html-содержимое div, которое ведет себя неправильно, и это заставит его пересчитать стили.

Что касается присвоения тегу html или body класса ie7, я рекомендую взглянуть на html5boilerplate.com. Если по какой-то причине вы не можете использовать их решение, jquery для этого:

    if ($.browser.msie){
        if ($.browser.version < 8){
            $("html").addClass("ie ie7");
        }
        else {
            $("html").addClass("ie");
        }
    }

Answer 2

Работает как надо. Все элементы li в меню перемещаются в доступное пространство. Если в окне недостаточно места, оно переместится на следующую доступную строку. Здесь нечего видеть.

Просто используйте минимальную ширину CSS, чтобы DIV не становился слишком маленьким для меню. Или рассмотрим жесткую компоновку (в отличие от гибкой).

Добавьте следующую строку в ваш div, чтобы он работал.

#outer {
    min-width:790px;
}