Незапущенный блок неожиданно очищает всплывающий блок в IE6 / IE7 - PullRequest
Новая
       61

Незапущенный блок неожиданно очищает всплывающий блок в IE6 / IE7

2 голосов
/ 02 ноября 2011

Я бился головой о списках ошибок Internet Explorer и не вижу ни одного, соответствующего этому поведению. Это известная проблема? Если да, то как он называется и есть ли способ его исправить?

Проблема: когда я перемещаю блоки влево, неплотные блоки справа (то есть все еще в «потоке») неожиданно движутся вниз, чтобы очистить всплывающие блоки. Я вижу проблему только в IE6 и IE7.

В этом примере пункт 5 должен быть сразу под пунктом 3 и справа от пункта 2. Вместо этого он перемещается вниз, чтобы очистить пункт 2.

Скриншоты: http://prentissriddle.com/tmp/tmp-float.gif

Код: 

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<style type="text/css">
p { border: 1px solid #000; font-family: sans-serif; }
</style>
</head>
<body>
<p>Paragraph 1: unfloated.</p>
<p style="float: left; clear: left; width: 150px;">Paragraph 2: floats left. a b c d e f g h i j k l m n o p q r s t u v w x y z</p>
<p>Paragraph 3: unfloated.</p>
<p style="float: left; clear: left; width: 150px;">Paragraph 4: floats left. a b c d e f g h i j k l m n o p q r s t u v w x y z</p>
<p>Paragraph 5: unfloated.</p>
</body>
</html>

Это известная ошибка? Есть ли исправление? Спасибо.

Ответы [ 2 ]

0 голосов
/ 02 ноября 2011

Я нашел «ответ» (по крайней мере, для IE7, я не смог протестировать IE6) на этом сайте: http://www.brunildo.org/test/IEWfc2.html (Случай 4, который разрешил вашу ситуацию, Случай 2).Я говорю «ответ», потому что это требует некоторого дополнительного HTML-кода и CSS, которые бесполезны в противном случае.Если есть способ обнаружить браузер и ввести его только при необходимости, это может быть лучше.Ключ должен был ввести еще один плавающий элемент перед элементом, на котором были float и clear.Вот модифицированная версия вашего кода:

HTML 

<p>Paragraph 1: unfloated.</p>
<p class="floated">Paragraph 2: floats left. a b c d e f g h i j k l m n o p q r s t u v w x y z</p>
<p>Paragraph 3: unfloated.</p><span class="floatFix"></span>
<p class="floated">Paragraph 4: floats left. a b c d e f g h i j k l m n o p q r s t u v w x y z</p>
<p>Paragraph 5: unfloated.</p><span class="floatFix"></span>

CSS 

p { border: 1px solid #000; font-family: sans-serif; }
.floated {float: left; clear: left; width: 150px;}
.floatFix {float: left; width: 0; height: 0; margin: 0; padding: 0;}
0 голосов
/ 02 ноября 2011

IE6 / 7 - это кошмары, которых лучше всего избегать. Есть ли способ, которым вы можете достичь макета, который вы хотите, используя методы, кроме как полагаться на четкие: левые и плавающие элементы? Я проверил ваш код, используя все трюки IE с фиксацией поплавка, которые я могу придумать, работая над головой (масштаб: 1, высота: 1%, явная настройка ширины, поле слева: на незакрепленных блоках, различные варианты отображения : настройки, обычные предложения из Position Is Everything ...), но не смог найти что-то, что заставило бы IE6 / 7 правильно выровняться по вертикали. Какая боль!

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

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <style type="text/css">
        p { border: 1px solid #000; font-family: sans-serif; margin: 0; padding: 0; }
    </style>
</head>
<body>
    <p>Paragraph 1: unfloated.</p>
    <p style="float: left; clear: left; width: 150px;">Paragraph 2: floats left. a b c d e f g h i j k l m n o p q r s t u v w x y z</p>
    <p>Paragraph 3: unfloated.</p>
    <p>Paragraph 5: unfloated.</p>
    <p style="float: left; clear: left; width: 150px;">Paragraph 4: floats left. a b c d e f g h i j k l m n o p q r s t u v w x y z</p>
</body>
</html>
...