Почему перемещение элемента из окна просмотра и обратно в него влияет?

Question

Итак, у меня есть меню с зависанием / выбранным состоянием, и оно нормально загружается в IE6 / IE7. Однако, когда я прокручиваю страницу вниз и помещаю элемент за пределы области просмотра, а затем возвращаюсь назад, я получаю поврежденное изображение! Я никогда не видел такой проблемы раньше. Есть кто-нибудь еще и может кто-нибудь предложить решение. Ниже приведены примеры работающего и разорванного изображения и URL-адреса действующего кода.

альтернативный текст http://bjmarine.net/post-load.png - при нагрузке

альтернативный текст http://bjmarine.net/post-scroll.png - сломан после прокрутки в окно просмотра

Я использую подход с раздвижными дверями с пролетом внутри фоновых изображений a и css

Полное меню можно найти @ http://bjmarine.net/samples.htm

Cheers, Denis

Решения:

#navigation ul.primary-nav li.selected a.menu-item-hover{height:25px;}
#navigation ul.primary-nav li.top-level.selected a.menu-item-hover span{height:21px;}
* html #navigation ul.primary-nav li.residential.selected a.menu-item-hover{width:88px;white-space:nowrap;}

Answer 1

Прежде всего, при проверке на наличие ошибок, подобных этой (еще лучше, всегда! ), проверьте вашу разметку и CSS, чтобы убедиться, что вы работаете со стандартным кодом. Если нет, то у вас будут проблемы.

Быстрая проверка вашей разметки приводит к 23 ошибкам! http://validator.w3.org/check?uri=http%3A%2F%2Fbjmarine.net%2Fsamples.htm&charset=%28detect+automatically%29&doctype=Inline&group=0

Конечно, большинство из них из секции HEAD, но в теле есть пара - решите их, затем попробуйте снова.

Далее: даже с ошибочной разметкой здравый смысл говорит, что прокрутка вниз и вверх не должна влиять на рендеринг. Это это ошибка IE, так что, без сомнения, вам придется изменить свой код для ее решения.

Итак:

• У вас неверная разметка - не ожидайте, что режим причуд будет интерпретировать то, что вы имели в виду . Решите их, прежде чем пытаться что-либо еще (например, UL не может быть пустым)

• Старые версии IE не любят CSS-селектор '>'. Избавьтесь от этого и используйте вместо этого классы.

• Если вы хотите отобразить что-то встроенное и с определенной высотой и шириной, используйте правило display: inline-block, это правильный вариант вместо display: block.

• У вас отрицательные поля. Это совсем не рекомендуется. У вас обычно есть много лучших способов решить эту проблему.

Как видите, эта ошибка может вызывать многие вещи. Решите все из них (что следует делать, даже если ошибок не было) и повторите попытку.

Если вы все еще получаете его, рассмотрите возможность рефакторинга вашей разметки - мы можем найти обходные пути много раз, но иногда нам приходится приспосабливаться (мы просто не можем исправлять ошибки IE удаленно ...)

Answer 2

Я думаю, что это связано с проблемой hasLayout.

Мне удалось исправить поведение в IE 7 (у меня на компьютере нет IE 6), введя в стиль свойство height, чтобы заставить IE признать, что у него есть макет.

#navigation ul.primary-nav > li.top-level > a.menu-item-hover:hover span, 
#navigation ul.primary-nav > li.top-level:hover > a span,
#navigation ul.primary-nav > li.top-level.selected > a span{
    color:#fff;
    display:block;
    margin:-17px 0 0;
    padding:12px 7px 10px 15px;
    height: 21px;     /* this is what I added, in global.css */
}

К сожалению, по-прежнему существует проблема с точки зрения вертикального положения, когда вы устанавливаете высоту элемента. Вы можете поэкспериментировать со свойством top или вычесть больше из свойства margin-top, чтобы исправить это.

Answer 3

Это звучит как ошибка IE peekaboo для меня - никаких конкретных советов, но быстрый Google должен предложить некоторые идеи.