Empezamos la serie de entradas dedicadas a los bugs que te puedes encontrar al maquetar con ie6, con uno de los bugs más conocido y desconocido al mismo tiempo: duplicate chars.

Descripción del bug

Digo conocido porque seguramente os lo hayáis encontrado en más de una ocasión, en algún proyecto o navegando por internet. Y desconocido debido a la naturaleza del bug, que la primera vez que lo ves se hace difícil intentar razonar qué puede hacer aparecer esos caracteres de más, en zonas donde no debería haber texto. Mi primera reacción al ver dicho efecto fue buscar en Google 'caracteres fantasma' y efectivamente, encontré referencias a duplicate chars.

Vamos a ver las maneras de solucionarlo, que son varias y apuesto la cabeza a que no son las únicas, y finalmente sólo la experiencia y práctica solucionándolo indicará cuál es mejor. Pese a conocer la manera de solucionarlo, en parte sigue siendo un misterio y no entiendo qué puede producir tal locura en nuestro "amigo" ie6.

¿Cuándo suele aparecer?

Por mi experiencia personal, enumero las razones que he comprobado:

1. Ocurre al maquetar utilizando float. Nuestra manera favorita :(
2. Suele darse con elementos flotantes adyacentes en el código, por lo que al maquetar con float, nos puede afectar.
3. Puede darse por espacios en el código xHTML.
4. Puede darse por comentarios en xHTML. !Éstos, además, pueden producir otros fallos en el renderizado de tu página en ie6! No los recomiendo.
5. Y como última posibilidad, atención a la propiedad CSS padding, que en combinación con otras propiedades CSS (o no), del elemento afectado (del que se duplican los caracteres), su contenedor, y los elementos flotantes adyacentes.

¿Cómo controlar esto?

Particularmente, hago lo siguiente:

1. Aislar el código CSS de los elementos implicados en el bug: elemento afectado, elementos adyacentes y el elemento contenedor. Sabemos que aislamos el código afectado si al comentar todo ese código y comprobar en el ie6 la maquetación, no presenta el duplicate chars.
2. Comprobar que no hay ningún comentario en el xHTML en toda su extensión y que no haya espacios, al menos en los alrededores de las capas afectadas; aunque puedes dejar el tema de los espacios y saltos de línea para más adelante, si estás seguro y comprobaste que el bug lo hace saltar la CSS y no el xHTML.
3. Intentar quitar algún float de los elementos afectados, comprobando que no estropee la maquetación.
4. En este momento, comentaría la mitad del código CSS afectado y comprobaría si el bug se sigue produciendo, desde el ie6. Si se produce, sabemos que el "culpable" de saltar el bug está en la otra mitad de código. De esta manera puedes ir cerrando el cerco alrededor del código CSS afectado, comentando partes mas grandes, hasta llegar a una o varias propiedades CSS que son las "causantes" del bug.
5. Si en este punto no has solucionado el problema, puedes usar la metodología de comentar el código CSS para buscar las propiedades críticas por todo el fichero CSS.
6. Si aún no se ha solucionado y ni siquiera te has acercado a la solución, quizás debas estudiar de una manera más profunda el bug:
   Positioniseverything tiene una buena explicación y diferentes formas de solucionarlo a las que yo he expuesto, creo recordar.

Despedida

El mundo de los bugs de ie6 es increíblemente extenso, con errores para todos los gustos; aunque espero, por el bien de todos, que tengan los días contados. Ya existen iniciativas para animar a la gente a que se actualice a navegadores actuales. En fin. El tiempo dirá.