Прикольный рендеринг в IE для HTML + CSS

Question

http://churchcentral.com/rfi.php?site_id=4&division_id=2144 - это страница, и проблема заключается только в IE. Если вы заметите, текст в конце «Шаг 2», текст «Следующая страница» повторяется. Если вы выделите любую из этих частей текста, IE выделит их обе.

Это ошибка в IE? Мы видели, как это происходит на одной странице, но с другим текстом, в разное время, и это вызывает проблемы у некоторых людей.

Любая помощь будет великолепна.

Answer 1

Есть ли конкретная причина, по которой в этом абзаце применяется float: left? Если я уберу это, оно будет отображаться правильно.

Кроме того, вы копируете точно такой же стиль, как и <h2> выше для шага 1. Вы также можете просто использовать <h2> вместо <p> для шага 2, верно? Я имею в виду, ваш набросок довольно странный на данный момент.

ETA: Почти все на этой странице плавает, что приводит меня к очень большому знаку вопроса:

На мой взгляд, это очень простая (с точки зрения макета) страница сверху вниз. Я думаю, что вы можете упростить многие вещи в этом CSS.

Вы можете легко поиграть с отключением или изменением определенных правил CSS в инструментах разработчика IE.

Answer 2

Если вы удалите свойства clear и float этого абзаца, вы увидите в Firefox, что плавающее текстовое поле над ним, вероятно, является причиной этого. Поскольку все эти типы с плавающей точкой, вероятно, IE не может с этим справиться в определенный момент, IE никогда не был лучшим в обработке с плавающей точкой. Я не понимаю, для чего нужны поплавки, так тебе это действительно нужно?