Ошибка 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; 
} 

, если удалить этот стиль или просто комментарий "цвет фона: # D5E4A5;" этого не происходит ...

любая идея, как его исправить?

спасибо!

EDIT: Вот скриншот ошибки (? Или это маржа)

alt text http://i38.tinypic.com/28bvhxf.jpg

Answer 1

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

, что я имел в своем распоряжении был:

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

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

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

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

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

Answer 2

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

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

Answer 3

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

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

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

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

Answer 4

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

Answer 5

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

В качестве примечания я не могу воспроизвести данный данный 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> 

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

EDIT: Просто выстрел в темноте, но вы можете попробовать установить значение для линии высоты на div.options.

EDIT 2: После просмотра скриншотов я помню, что я имел эту проблему на работе раньше, и исправить в моем случае было добавить position:relative; zoom:1; в контейнер (или, возможно, ссылки, я забываю!) . Попробуй это?

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

Answer 6

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

Answer 7

У меня есть и эта точная проблема. Триггер, безусловно, является цветом фона при наведении, но обычные решения по предоставлению родительской функции 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; } 

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