Fondo del elemento vacío utilizado por el siguiente elemento en IE

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

Pregunta

En IE6, el párrafo que sigue al párrafo vacío se muestra con el color de fondo del párrafo vacío, ¡lo que supongo que está mal! Funciona correctamente en Firefox, pero no he comprobado IE7.

¿Hay una solución CSS para este problema, o tengo que eliminar el elemento vacío?

(Preferiría no tener que eliminar elementos vacíos, ya que eso implica escribir código para verificar si cada elemento está vacío antes de generarlo)

El comportamiento no cambia utilizando doctypes estrictos o transitorios (se agregó este comentario en respuesta a las respuestas)

Curiosamente, el efecto no ocurre con el color del texto, solo con el color de fondo. 

<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>
¿Fue útil?

Solución

Un párrafo vacío no tiene sentido, lo que significa que probablemente esté escribiendo el HTML incorrecto.

Además, su ejemplo no tiene un DOCTYPE: un DOCTYPE válido es esencial para que los navegadores interpreten correctamente su código, sin uno estará atascado en el modo peculiar.

Pero de todos modos, la solución más simple para este error es simplemente establecer un fondo para su elemento actual sin estilo.

Otros consejos

Acabo de probar eso en IE7 y puedo confirmar que también sucede allí.

Parece que el párrafo sin estilo no tiene un fondo rojo, es solo que IE7 está dibujando el cuadro rojo para el párrafo vacío y luego dibujando el siguiente párrafo en la parte superior.

Puedes ver esto por ti mismo probando este código: 

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

Debería ver que el párrafo rojo está a 50 píxeles desde la izquierda.

Por qué está haciendo esto es una incógnita. Agregar algún código para verificar si el párrafo va a estar vacío no es demasiado difícil, además elimina el marcado inútil de su salida y evita este problema por completo. ¿Darle una oportunidad?

Intenta poner un espacio sin interrupciones en tus párrafos vacíos ... 

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

Excepto sin espacio después del signo & ...

Agregue un doctype en la parte superior de su archivo HTML. 

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

Eso obligará a IE6 a cambiar las peculiaridades del formulario al modo estándar. Esto trae muchas otras ventajas, como un modelo de caja correcto, por lo que debería hacerlo de todos modos.

Una solución extraña que encontré fue agregar posición: en relación con los párrafos potencialmente vacíos como este: 

<p style='background-color:red;position:relative'></p>
<p>Unstyled background fine because previous element is 'relative'</p>
Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top