Цвет фона и курсив вызывают ошибку Internet Explorer 7

Следующий код демонстрирует проблему, с которой я столкнулся:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

<style>

p
{
    background-color:#FFF;
}


</style>
</head>
<body>

  <img src="http://www.google.com/intl/en_ALL/images/logo.gif" style='float:left;'>
  <p><em>This is an italic sentence.</em></p>
  <p><strong>This is a bold sentence.</strong></p>
  <p>This is a normal sentence.</p>

</body>
</html>

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

Удаление первой строки с тегами приводит к исчезновению строк. Попробуй сам. Удалите каждую из трех строк и посмотрите, как меняется ошибка.

Что в мире происходит с этим?

-

Решение: проблема hasLayout. Добавление атрибута zoom: 1 к em исправляет проблему.

Источник

2 ответа

Решение

Не уверен, почему это происходит, но есть много способов убедиться, что это не так, включая добавление display: inline-block в em.

Источник

Это происходит из-за плавающего изображения.

Когда изображение плавает, оно технически не имеет собственного макета. Белые полосы - это теги

, так как в CSS вы дали им фон #FFF.

IE7 считает, что теги

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

Я бы попытался обойти это, предоставив тегам

левое поле. Если вы сделаете достаточно левого поля, чтобы пройти изображение, вы больше не должны получать эти полосы.

Так что попробуйте что-то вроде...

p{ background-color: #fff; margin-left: 300px; }

Вы можете настроить левое поле, но что-то в этом направлении должно избавить вас от белых полос.

Источник
Другие вопросы по тегам