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

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

0 голосов
/ 14 ноября 2008

В 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>

Ответы [ 5 ]

1 голос
/ 16 ноября 2008

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

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

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

1 голос
/ 14 ноября 2008

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

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

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

1 голос
/ 16 ноября 2008

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

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

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

1 голос
/ 14 ноября 2008

Я только что проверил это в 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>

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

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

0 голосов
/ 17 ноября 2008

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

<p style='background-color:red;position:relative'></p>
<p>Unstyled background fine because previous element is 'relative'</p>
...