Aunque Internet Explorer sea un navegador odiado por muchos y se están realizando campañas para borrarlo del mapa, algunas personas no tienen más remedio que usarlo. Si eres de ellas, sabrás que existen bugs (errores) que impiden la correcta visualización de los sitios.
En esta entrada recopilaré la mayoría de los bugs que tienen lugar en Internet Explorer, tanto en las versión 6, como en la 7 y la 8, y la manera de resolver el bug (enlace externo). Los muestro a continuación:
Nombre del bug | Versiones afectadas | Descripción |
---|---|---|
Image Label Focus Bug | IE8, IE7, IE6 | Elementos |
No Auto-Margin Center on Buttons Inconsistency | IE8 | Los elementos tipo botones no están centrados cuando { display: block; margin-left: auto; margin-right: auto; } es aplicado en ellos y el ancho no está especificado. |
Incorrect Float Shrink-Wrap Bug | IE7, IE6 | Elementos flotantes que siguen otros elementos flotantes y tienen definidos el atributo “clear” no se les disminuirá su tamaño correctamente. |
Document Scrollbars Overflow Inconsistency | IE7, IE6 | Valor no convencional para Overflow en el elemento que puede aparecer como bug con referencia a “overflow” en . |
Float Squeeze Weird Gap Bug | IE7, IE6 | Un hueco aparece entre el último y el segundo lugar de los elementos flotantes que están organizados verticalmente. |
Float Squeeze Duplicate Last Character Bug | IE7, IE6 | El último carácter de un elemento flotante es duplicado. |
Empty Element Height Bug | IE7, IE6 | Elementos vacíos hacen que su estructura obtenga altura. |
Form Control Double Margin Bug | IE7, IE6 | horizontal margins on and |
IE7 1px Dotted Border Appears As Dashed Bug | IE7 | 1 borde punteado de 1px aparece como borde discontinuo cuando uno de los lados de los bordes está estilizado con un ancho más largo que 1px. |
Relative Overflow Failure Bug | IE7, IE6 | Elementos con `overflow` establecidos para ya sea `hidden` o `auto` se comportan como si overflow estuviera establecido como `visible`cuando los descendientes que están causando overflow tienen la position: relativo establecidos en ellos. |
IE7 “Broken” :hover Absolute Bug | IE7 | :hover que cambia los desplazamientos a izquierda/arriba de un descendiente absolutamente posicionado no parece “trabajar” si el elemento está oculto de la vista; si es visible, los desplazamientos izquierda/arriba no cambiarán en :hover. |
Button Background Shift On :active Bug | IE8 | El fondo rotará hacia arriba y hacia la izquierda en el estado :active cuando se aplica a |
Ignored :focus Bug | IE8 | Un selector que contenga :focus que esté seguido de otro selector simple, es ignorado. |
Invisible Hover Border Bug | IE8 | Borde inferior en estado :hover hace que no aparezca completamente o que tenga 1px menos (o no se muestra outline si está activado). |
Percentage Padding Margin Bug | IE8 | Margen vertical aparece collapsado sobre una combinación específica de padding vertical definido en porcentajes o bien un borde o padding definido en la zona padre. |
Image Float Bullet Chaos Bug | IE8 | Posición incorrecta o no se renderiza toda la lista de puntos negros cuando estos items tienen imágenes flotantes. |
Non-Inherited TH Text-Align Bug | IE8 | Valor “text-align” ascendente no es heredado por el elemento padre. |
32 Styles Limitation | IE8, IE7, IE6 | Estilos son ignorados cuando están definidos en el 32 (o siguiente) método de estilo (Ej: |
Hover White Background Ignore Bug | IE7 | El fondo no cambia en :hover. |
IE7 Child Selector Comment Bug | IE7 | Un selector que contenga un elemento hijo seguido de un comentario es ignorado. |
Star HTML Bug | IE6 | selector * html no es ignorado en IE6 (siendo ignorado cuando esta es la primera parte del selector). |
IE6 !important Ignore Bug | IE6 | La etiqueta “!important” es ignorada cuando la misma regla es definida nuevamente después. |
PNG Image and Background Color Mismatch | IE8, IE7, IE6 | Los colores especificados en CSS difieren de los usados en las imágenes PNG a pesar de tener el mismo código de color. |
No Auto Margin Center Pseudo-Bug | IE8, IE7, IE6 | Margenes a los lados definidos con el valor “auto” no centran un elemento en bloque. |
:first-line !important Rule Ignore Bug | IE8 | Reglas dentro del :first-line pseudo-class son completamente ignorados cuando el modificador “!important” es usado. |
:first-letter Ignore Bug | IE6 | Toda la regla :first-letter es ignorada. |
:first-letter !important Rule Ignore Bug | IE8 | Reglas dentro del :first-line pseudo-class son completamente ignorados cuando el modificador “!important” es usado. |
Partial Click Bug v2 | IE7, IE6 | Solo el texto es clickable cuando se realiza :hover en enlaces[ (opcional) hasta que el cursor del ratón se posicione encima del texto actual]. |
Staircase Bug | IE7, IE6 | Elementos flotantes se mueven hacia arriba como una escalera. |
Disappearing List Background Bug | IE6 | El fondo en
|
noscript Ghost Bug | IE8, IE7, IE6 | Elementos |
No Transparency Click Bug | IE8, IE7, IE6 | Áreas transparentes de una imagen de fondo en enlaces no son clickables cuando “filter” es usado para arreglar la transparencia PNG. |
List Drop Shift Bug | IE8 | Los
|
and
|
IE7, IE6 | Puntos/números desaparecen en los elementos
|
No line-height Vertical Center on Images Bug | IE7, IE6 | Las imágenes no están centradas verticalmente usando el método line-height. |
No Background Image Bug | IE8, IE7, IE6 | No aparece fondo en IE cuando la imagen de fondo es usada (usando la propiedad “background” como shorthand). |
Custom Cursor Bug | IE8, IE7, IE6 | Cursores personalizados no aparecen en IE |
Leaking Background Bug | IE6 | El fondo se muestra fuera del elemento en otros elementos que estén cercanos en el flujo. |
Expanding Height Bug | IE6 | El elemento es más largo que la altura especificada (mayormente se aplica en alturas pequeñas). |
Expanding Width Bug | IE6 | El elemento es más ancho que la altura especificada. |
Double Margin Bug | IE6 | Márgenes derecho e izquierdo son dobles en elementos flotantes. |
Negative Margin Bug | IE7, IE6 | Parte del elemento que se encuentra fuera del contenedor (div, por ejemplo) desaparece cuando los márgenes negativos son usados. |
Italics Float Bug | IE6 | El elemento cae abajo del elemento flotante con texto en cursiva. |
3px Gap Bug aka Text Jog Bug | IE6 | Los elementos cercanos a alguno flotante o llevan un punto de tres píxeles o descienden debajo de él o siguen desplazándose cuando varios elementos están flotando |
Text-Align Bug | IE7, IE6 | La propiedad text-align afecta a los elementos en bloque. |
hasLayout Bugs
Fallos de IE causados por elementos que tienen o no tienen layout.
Nombre del bug | Versiones afectadas | Descripción |
---|---|---|
Scared of Floats Bug | IE7, IE6 | Elementos con layout flotan en vez de ir dentro de elementos flotantes |
Border Chaos Bug | IE6 | Los bordes se disponen de forma caótica (se definen donde no se deben o no existen) |
Sub-Hover Bug | IE6 | Reglas con selectores como a:hover foo{} no funcionan |
Partial Click Bug | IE6 | Solo es posible clickar texto en enlaces (a>) que son estilizados con display: block |
Disappearing Content Bug | IE6 | Algún contenido aparece o desaparece cuando se realiza scroll o transformación de la ventana (minimizándola o maximinizándola) |
Sin soporte
Propiedades y valores ignorados por IE
Propiedades | Versiones afectadas | Descripción |
---|---|---|
No Child Selector Support Workaround | IE6 | Selector hijo ignorado |
Max-Height Workaround | IE6 | max-height no soportado |
Max-Width Workaround | IE6 | max-width no soportado |
Opacity | IE8, IE7, IE6 | Opacidad no soportada |
Min-Width Workaround | IE6 | Propiedad min-width no soportada |
Min-Height Workaround | IE6 | Propiedad min-height es ignorada |
¿Y tú, sueles tener estos bugs a menudo o directamente no tienes en cuenta a Internet Explorer?
Vía | haslayout