IE6 - текст скрыт без причины?

Question

Очень долго у меня была эта проблема, но всегда мне удавалось как-то ее избежать (удаляя элементы или меняя порядок), и вот она снова, и я понятия не имею, как от нее избавиться. Во-первых, это появилось в моей панели администратора, но лишь немногие пользователи обращают внимание, что это не большая проблема (никто не использует IE6), но теперь эта проблема появляется на моей странице индекса портала, и я должен избавиться от нее, потому что 15% портала посетители IE6 посетители. Вот ССЫЛКА для тестирования версии портала: Если вы откроете эту страницу в IE6, вы увидите, что вторая новость (под названием: Тестовая) не имеет никакого текста, только изображение. Что ж, если вы наведите курсор мыши на это изображение, вы увидите, что там есть текст. Эта проблема возникает только тогда, когда я вхожу в paragraf, высота которого не больше высоты этого изображения. Если я ввожу то же изображение, но с большим количеством текста, эта проблема с отображением / скрытием исчезает. Я надеюсь, что кто-то знает, почему это происходит, потому что эта проблема мучает меня в течение нескольких лет, но я так и не понял, что является основной причиной этой проблемы и как ее избежать.

Любая помощь приветствуется! Иль

EDIT:

Вот решение этой проблемы: http://www.positioniseverything.net/explorer/peekaboo.html

Answer 1

Ну, проще всего сделать копию вставки со страницы, где подробно объясняется:

HTML код:

<!--********** Start of demo ***********-->

<div id="floatholder">

<div id="float">
<br />
<span>&nbsp;Float&nbsp;
<br /><br />
<a href="#">&nbsp;test link&nbsp;</a>
</span>
</div>

This is bare text. <a href="#">Test link</a>

<div style="border: 3px solid #f00; background: #dde;">This is text inside a div.
<a href="#">Test link</a></div>
This is bare text. <a href="#">Test link</a>
<div style="border: 3px solid #0c0; background: #dde;">This is text inside a div.
<a href="#">Test link</a></div>
This is bare text. <a href="#">Test link</a>
<div style="border: 3px solid #00f; background: #dde;">This is text inside a div.
<a href="#">Test link</a></div>
This is bare text. <a href="#">Test link</a>

<div id="clear">Clearing div</div>  <!--******* Note: a cleared <br> will not prevent bug *******-->

<div style="border: 3px solid #00f; background: #dde;">This div is after the cleared div. (purple box) If cleared div
does not touch float, bug is not triggered. <a href="#">Test link</a></div>
</div>

<!--********** End of demo ***********-->

А вот и скриншот с IE6

Исправления:

Исправления:

Наконец, эта ошибка будет вызвана даже если div # float предшествует div # floatholder, при условии, что это внешний поплавок на самом деле касается очистка div внутри div # floatholder!

Есть три способа, которыми мы знаем предотвратить эту ошибку.

1. Следите за тем, чтобы очищающий элемент не касался поплавка, или избегайте использования фон на div # floatholder. Не точно идеально.
2. Дайте div # floatholder и div # float 'position: относительный'. Быть Обязательно полностью протестируйте этот метод.
3. Give div # floatholder hasLayout (теперь предпочтительный метод)

Мы предлагаем использовать условный комментарий скормить исправление hasLayout в IE6 и только ниже. Дополнительные детали полезны для этот метод можно найти в Zoom Страница исправления .

Спасибо Саймону Виллисону за своевременный скриншот.

Эта ошибка называется Peekaboo, и вот подробное объяснение всего: http://www.positioniseverything.net/explorer/peekaboo.html

Хотя, я должен признать, что для меня это сработало, когда я установил все эти 3 шага. После первых двух он не работал, но после того, как я добавил display: inline к плавающему div, он работал.

Answer 2

Не могли бы вы опубликовать (минимальный пример) код здесь, чтобы мы могли ссылаться на него еще долго после того, как копия вашего сервера исчезнет (... как сейчас)? В противном случае этот вопрос никому не будет служить справочным или учебным пособием.