IE6 ошибка. Высота Div увеличивается при срабатывании: hover

Question

У меня есть страница с списком «тегов», как здесь, в SO, и когда мышь находится над ней, она становится темнее.

Отлично работает с Ie7, 8, FF, Chrome, Safari и т. Д., Но в IE6 есть ошибка, которая возникает при запуске: hover.

Ошибка в том, что div, содержащий эти (ul li a), получает увеличение высоты.

CSS у меня есть:

div.options ul.tags li a:hover
{
    background-color: #D5E4A5;
}

если я удаляю этот стиль или просто комментирую "background-color: # D5E4A5;" этого не происходит ...

есть идеи как это исправить?

спасибо!

РЕДАКТИРОВАТЬ: Вот скриншот ошибки:

Answer 1

только что исправил! : D

что у меня было раньше:

<div class="options clearfix">
    <!--content here-->
</div>

и я заменил на:

<div class="options">
    <div class="clearfix">
        <!--content here-->
    </div>
</div>

Теперь IE6 счастлив, и я тоже счастлив ...

Спасибо всем за помощь!

Answer 2

Обычно это набор границ, который не был определен изначально. Попробуйте установить границу растущего DIV в цвет фона по умолчанию. Я предполагаю, что вы больше не увидите роста.

Answer 3

У меня точно такая же проблема. Триггер определенно является цветом фона при наведении, но обычные решения по предоставлению родительского hasLayout не работают, я думаю, из-за того, что теги A вложены в другие теги. Исходя из того, что я в итоге сделал, ваше решение о вложении прозрачного исправления - правильная логика: разделение нарушающего элемента, родительского и очищающего объектов.

Решение, которое я сделал, было следующим:

<div class="options">
<!--content here-->
<!--[if lte IE 6]><div class="ie6clear"></div><![endif]-->
</div>

Со следующим CSS:

.ie6clear{ clear:both; height:0; overflow:hidden; }

Таким образом, CSS-код clearfix применяется только для IE6, подчеркивает, что такое посторонняя разметка, и облегчает удаление, когда IE6 больше не поддерживается.

Answer 4

Находятся ли метки в месте, где вы могли бы постоянно давать им цвет фона? Если да, устанавливает ли их цвет фона, когда: hover не активирован, все еще вызывает изменение их высоты?

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

<!-- This does not display the described behavior -->
<div class="options">
  <ul class="tags">
    <li><a href="#">c++</a></li>
    <li><a href="#">not-programming-related</a></li>
    <li><a href="#">cheese</a></li>
    <li><a href="#">barnacle</a></li>
  </ul>
</div>

Лучшее, что я могу предложить, - это сделать то, что сказал Меркатор, и задать расположение элементов.

РЕДАКТИРОВАТЬ: просто выстрел в темноте, но вы можете попробовать установить значение для высота строки на div.options .

РЕДАКТИРОВАТЬ 2: После просмотра ваших скриншотов я вспоминаю, что у меня была эта проблема на работе раньше, и исправление в моем случае заключалось в добавлении position:relative; zoom:1; в контейнер ( или, может быть, ссылки, я забыл!) . Попробуйте это?

РЕДАКТИРОВАТЬ 3: После googling для некоторых решений, вы можете попробовать установить высоту, если ваш контейнер явно. Если это не работает, я понятия не имею, что делать!

Answer 5

Вы явно указали высоту для этого div? Если нет, установка высоты может сделать это исчезнуть.

Answer 6

У меня тоже было такое, но я не могу вспомнить, где именно это было. Я думаю, что я решил это, но я не совсем уверен, как больше. Я могу думать о двух вещах:

1. Дайте элементу "макет" . Я склонен делать это с zoom: 1.

2. Добавьте vertical-align: top к элементу a или li.

Не могли бы вы привести более полный пример кода? Я не могу воспроизвести его только с этим CSS.

Answer 7

Я думаю, что однажды столкнулся с этим, и что происходило, было то, что границы были изменены (или это были поля?) Я закончил тем, что отказался, и просто дал проблемным элементам прозрачную границу 1px, и вызвал это день.

Я действительно сомневаюсь, что это окажется вашим решением, но я надеюсь, что оно даст вам некоторое представление о том, в каком направлении смотреть!