Цвет фона и курсив выделяют ошибку Internet Explorer 7
-
19-09-2019 - |
Вопрос
Следующий код демонстрирует проблему, с которой я сталкиваюсь:
<!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 с проходящими через него "белыми горизонтальными полосами", выстроенными в ряд с каждым абзацем, отображаемым справа.
Удаление первой строки с <em> тегами приводит к исчезновению строк.Попробуйте это сами.Удалите каждую из трех строк и посмотрите, как изменится ошибка.
Что, черт возьми, со всем этим происходит?
--
Разрешение:Проблема с описанием.Добавление масштабирования:атрибут 1 для em устраняет проблему.
Решение
Не уверен, почему это происходит, но есть много способов убедиться, что этого не произойдет, включая добавление отображения:встроенный блок для em.
Другие советы
Это происходит из-за всплывающего изображения.
Когда изображение перемещается, технически оно не имеет собственного макета.Белые полосы - это теги <p> , поскольку в CSS вы задали им фон из #FFF.
Для IE7 это означает, что <p> теги на самом деле начинаются в начале страницы в крайнем левом углу, поэтому он запускает их именно там, но просто перемещает содержимое за перемещаемое изображение, оставляя забавные белые полосы поверх перемещаемого изображения.
Я бы попробовал обойти это, указав вашим тегам <p> левое поле.Если вы оставите достаточно левого поля, чтобы пройти мимо изображения, у вас больше не должно получиться этих полос.
Так что попробуйте что-нибудь вроде...
p{ background-color: #fff; margin-left: 300px; }
Вы можете отрегулировать левое поле, но что-то в этом роде должно избавить вас от белых полос.