css hover ломает макет страницы в IE ПОЧЕМУ?

Question

Я использую курсор в стиле CSS для некоторых ссылок на изображения на моей странице.

Когда пользователь наводит курсор на изображение, его фоновая позиция изменяется, обеспечивая эффект выделения.

При наведении курсора на изображение в i.e.6 моя страница сдвигается на 40px.

Почему это?

Answer 1

IE6 - собака. Попробуйте:

a{zoom:1}

Answer 2

Модель Оле 'Снафу! IE6 представляет отличную блочную модель от W3C. Ширина блока IE6 (надеюсь, я правильно понял) - это общая сумма, включая отступы и границы. Боксовая модель W3C заявлена ​​по ширине, точка. Поля, отступы и границы являются дополнением к ширине объекта.

Примеры работы различных моделей коробок:
http://css.maxdesign.com.au/listamatic/about-boxmodel.htm http://en.wikipedia.org/wiki/Internet_Explorer_box_model_bug

Answer 3

Использование зависания с Internet Explorer может вызвать странные проблемы со стилем.

Вы можете избежать проблем с браузером, используя условные комментарии.

Stackoverflow Вопрос относительно характеристик браузера

Stackoverflow Вопрос о том, почему всегда будут необходимы условные комментарии

Edit:

Internet Explorer 6 поддерживает атрибут CSS ": hover" только для элементов "a"

Пересоздать:

Только для документации ... если вы действительно хотите или должны использовать "hover".

Попробуйте этот пример:

Наведите курсор в Internet Explorer 6

Но это действительно грубое решение.

Answer 4

Какую версию IE вы используете? Вы должны предоставить пример кода здесь. Однако вы можете попытаться добавить следующий грязный трюк CSS к изображению, на которое наведен курсор.

<style type="text/css">
  img:hover
  {
      _margin-top:-40px;
  }
</style>

Приведенный выше стиль предназначен только для IE, другие браузеры его игнорируют.