Фон пустого элемента, используемого следующим элементом в IE

StackOverflow https://stackoverflow.com/questions/289315

Вопрос

В IE6 абзац, следующий за пустым абзацем, отображается с цветом фона пустого абзаца, что, я думаю, неверно! В Firefox он работает правильно, но я не проверял IE7.

Есть ли CSS решение этой проблемы или мне нужно удалить пустой элемент?

(Я бы предпочел не удалять пустые элементы, так как это предполагает написание кода, чтобы проверить, пуст ли каждый элемент перед его выводом)

Поведение остается неизменным с использованием строгих или переходных типов документов (добавил этот комментарий в ответ на ответы)

Интересно, что эффект не происходит с цветом текста, а только с цветом фона. 

<html>
<head>
</head>
<body>

  <p style='background-color:green'>Green content</p>
  <p style='background-color:red'>Red content</p>
  <p>Unstyled background working because previous red element is not empty</p>

  <p style='background-color:green'>Green content</p>
  <p style='background-color:red'></p>
  <p>Unstyled background broken because previous red element is empty</p>

  <p style='color:green'>Green content</p>
  <p style='color:red'>Red content</p>
  <p>Unstyled text color working because previous red element is not empty</p>

  <p style='color:green'>Green content</p>
  <p style='color:red'></p>
  <p>Unstyled text color working even though previous red element is empty</p>

</body>
</html>
Это было полезно?

Решение

Пустой абзац не имеет смысла - это означает, что вы, вероятно, пишете не тот HTML.

Кроме того, в вашем примере нет DOCTYPE - действительный DOCTYPE необходим для того, чтобы браузеры правильно интерпретировали ваш код, без которого вы застрянете в режиме причуд.

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

Другие советы

Я только что проверил это в IE7 и могу подтвердить, что это тоже происходит там.

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

Вы можете убедиться в этом сами, попробовав этот код: 

<p style='background-color:green'>Green content</p>
<p style='background-color:red; margin-left:50px'></p>
<p>Unstyled background broken because previous red element is empty</p>

Вы должны увидеть, что красный абзац слева на 50 пикселей.

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

Попробуйте вставить неразрывный пробел в пустые абзацы ... 

<p style='color:red'>& nbsp;</p>

Кроме пробела после амперсанда ...

Добавьте тип документа в начало HTML-файла. 

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

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

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

<p style='background-color:red;position:relative'></p>
<p>Unstyled background fine because previous element is 'relative'</p>
Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top