PROBLEMAS DERIVADOS DEL QUIRKS MODE (MODO

CHAPUZAS) DE INTERNET EXPLORER:

El modo chapuzas (Quirks Mode) es un modo en que los navegadores entran cuando una página no tiene

definido un DOCTYPE o pese a tenerlo no cumplen el estándar referente a ese DOCTYPE. En “What

happens in Quirks Mode?“ un artículo de Jukka “Yucca” Korpela explican los comportamientos más

comunes que tienen los navegadores al entrar en dicho modo aparte del habitual procesado de las páginas

más lento.

Paso a traducir los puntos (a la derecha de esos puntos hay una explicación detallada del modo chapuzas).

¿Qué pasa en el modo chapuzas (Quirks Mode)?

En modo chapuzas, se ha observado que el comportamiento de los navegadores funciona de distintas

formas, pero no todos los navegadores muestran estas características:

• El modelo de caja es incorrecto (diferente de la especificación CSS, aunque intuitivamente más

natural). Esto significa que las propiedades width y height especifican las dimensiones de todos los

elementos de la caja, incluyendo el borde y el padding y no sólo el contenido de los elementos.

• Las dimensiones de los elementos en línea no reemplazados (por defecto span) son afectados por

las propiedades width y height (mientras que en la especificación CSS son ignorados).

• El alto (height) de las tablas es afectado por un atributo height no estándar en el elemento table.

• El Overflow es tratado por expandir una caja. Cuando el contenido de un elemento no cabe en las

dimensiones especificadas para ello (explícitamente o no), entonces overflow: visible (el por defecto)

debería hacer que el contenido aparezca incluso si las dimensiones de la caja están especificadas. En

quirks mode las dimensiones cambian, esto se puede comprobar fácilmente si por ejemplo la caja tiene

un color o un borde.

• El padding para una imagen es ignorado cuando es especificado en el CSS para el elemento img o

el elemento input type="image".

• El margen horizontal por defecto para una imagen “flotante” es de tres pixels (en lugar de cero).

Esto es, un elemento img con el atributo align="left" o align="right" o con las reglas equivalentes

en CSS (float: left o float:right) aplicados, el navegador se comporta como si el elemento img

tuviera el atributo hspace="3" (o su equivalente margin-left / margin-right con un valor de 3px).

Esto se aplica a Internet Explorer, en otros navegadores el modo quirks puede provocar un margen extra

pero sólo en uno de los lados de la imagen y su ancho puede ser de 2 pixeles en lugar de 3.

• El alineamiento vertical de una imagen bajo ciertas condiciones llega hasta el pie de la caja en

lugar de la “baseline” del texto. Esto pasa cuando la imagen es el único contenido en un elemento,

típicamente una celda de una tabla.

Esto significa que una imagen en una celda de una tabla está por defecto abajo del todo de la celda en

modo quirks (lo que a menudo es lo que el autor quiere), mientras que en el modo estándar hay unos

pocos pixels de espacio debajo de la imagen (a menos que pongamos alguna regla tipo vertical-

align: bottom para el elemento img).

• El centrado de un bloque en CSS usando por ejemplo margin: 0 auto no funciona.

• Las propiedades de las fuentes no son heredadas de body o otros elementos como las tablas. Esto

pasa especialmente para font-size pero puede pasar con font face, color y line-height. Por ejemplo si

especificamos: • body { font-family: Arial; }

Es posible que la fuente dentro de una tabla siga siendo la usada por defecto del navegador.

• En el tamaño de la fuente para una celda de una tabla, un valor especificado en porcentaje (ej:

80%) es interpretado como relativo al tamaño básico de la fuente del navegador y no al tamaño

especificado en su elemento padre (la fila (”row”) de la columna) tal y como dicen las especificaciones

CSS.

• Las palabras clave del tamaño de la fuente son interpretadas incorrectamente así pues medium es

mayor que el tamaño básico del navegador y small equivale al tamaño base. Ocurre de forma similar en

todo el resto de la escala: xx-small, x-small, small, large, x-large y xx-large son interpretados

sistemáticamente mal; cada valor es interpretado como uno más grande de lo que debería.

• Los valores de las propiedades mal formados a menudo son interpretados basandose en

conjeturas, por ejemplo margin: 10 es interpretado como margin: 10px y color: ffffff como

color: #ffffff.

Esto trasgrede las reglas principales a la hora de procesar valores incorrectos: si un valor es incorrecto

por la sintaxis debe ser ignorado.

• Errores a la hora de “ser Case-sensitive” y pasan a no serlo. Por ejemplo el selector .foo concuerda

con el elemento class="Foo" o class="FOO". Según las especificaciones CSS, en estos contextos el uso

de mayúsculas/minúsculas es significativo.

• Los nombres mal formados son aceptados en clases e identificadores/selectores. Específicamente

los nombres que empiezan por un intervalos o un número (ej. en los selectores usar .123a o #42) son

aceptados.

• La declaración white-space: pre es ignorada.

• Varios añadidos al soporte de CSS (como la propiedad max-width) en Internet Explorer 7 no son

usadas en modo quirks. Esto es, hay varias características de CSS que no estan soportadas en Internet

Explorer 6 pero sí en Internet Explorer 7, pero solo en el modo estándar. Para más información sobre ello

mirad la entrada _Details on our CSS changes for IE7 en el blog de Microsoft.

La lista seguramente no es exhaustiva. Muchos puntos son principalmente con Internet Explorer 7. Otros

navegadores pueden tener un modo quirks que simula versiones antiguas de Internet Explorer de forma

parecida.

Comprobando el modo

Para ver en que modo se carga una página (Quirks vs Estándar):

• En Firefox usad el comando View/Page Info y mirad el panel general (N.dT:

Herramientas/Inofrmación de la página o Ctrl+I en muchas versiones de Firefox).

• Para IE descargat el Bookmarklet Quirks or Standards Mode.