Caracteres duplicados en Explorer 6 windows

Un bug más de nuestro amigo IE6. Me ha tenido un poco liado algunos días puesto que las referencias que aparecen de este bug en google suelen hablar de un conocido error, con el mismo síntoma, que se produce cuando se utilizan comentarios HTML entre los flotantes. Sin embargo este error se puede producir sin que haya comentarios en ningún sitio. Tras muchas vueltas he logrado encontrar una web donde se describe el error. Dado que la explicación está en ingles pasa a explicarlo en castellano con algunas modificaciones.

Síntomas: bajo el último elemento de una sucesión de flotantes aparecen caracteres repetidos.

Condiciones

  • Existen 3 o más elementos, originalmente elementos de linea y establecidos como flotantes, y cuyo ancho o suma de sus anchos es exactamente igual al de su contenedor
  • No existe ningún elemento de linea no flotante entre los flotantes y el borde superior del contenedor

El efecto es muy curioso porque Internet Explorer Win repite los ultimos caracteres del último flotante y el número de caracteres repetidos es igual al número de flotantes menos dos.

Ejemplos [lógicamente solo se pueden ver en IEWIN]:

  • Ejemplo 1: hay 8 elementos flotantes, al final del último se repiten 7 xD
  • Ejemplo 2: hay 5 elementos flotantes y en este caso se repiten 3 xD xD

Soluciones CSS:

He obviado las soluciones que implican cambiar el codigo html (como añadir espacios en blanco) por que no me parecen limplias.

  • Solución: poner un color de fondo (background:#fff) al primer flotante (o a todos). El fondo puede ser transparente (background:transparent)
  • hay más consideraciones que iré publicando…


8 comentarios a esta entrada

En un caso en el que me ocurría eso en un menú de links los caracteres fantasma desaparecieron al poner un
después del último enlace que era el que producía el error.

Usé esta solución porque el color de fondo no lo arreglaba.

En un caso en el que me ocurría eso en un menú de links los caracteres fantasma desaparecieron al poner un “< br >” después del último enlace que era el que producía el error.

Usé esta solución porque el color de fondo no lo arreglaba.

br

La solución que yo he usado siempre ha sido que después del último de los flotantes se añade otro tag con el estilo clear:both.

De esta manera se quitan los caracteres fantasmas

Que alguien quite todas esas cosas feas que aparecen en inglés, porfa

:-)

Esto a veces puede ser mas sencillo de solucionar, el problema esta dado por los comentarios que a veces utilizamos… yo resolvi mi problema eliminando los comentarios… :-)

podrías subir nuevamente los ejemplos? porque los links estan rotos

este bug sucede muchas veces por tener excesivas líneas de cometarios dentro del XHTML.

[...] Otra posible solución será asignarle al elemento un color de fondo en la CSS. [...]

Leave a Reply