Мой макет страницы ломается в 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;
}