listado-bugs-ie

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 bugVersiones afectadasDescripción
Image Label Focus BugIE8, IE7, IE6Elementos<img> que están dentro de elementos<label> cuando son clickados no hacen que el focus sea transferido al form de forma correspondiente.
No Auto-Margin Center on Buttons InconsistencyIE8Los 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 BugIE7, IE6Elementos flotantes que siguen otros elementos flotantes y tienen definidos el atributo “clear” no se les disminuirá su tamaño correctamente.
Document Scrollbars Overflow InconsistencyIE7, IE6Valor no convencional para Overflow en el elemento <html> que puede aparecer como bug con referencia a “overflow” en <body>.
Float Squeeze Weird Gap BugIE7, IE6Un hueco aparece entre el último y el segundo lugar de los elementos flotantes que están organizados verticalmente.
Float Squeeze Duplicate Last Character BugIE7, IE6El último carácter de un elemento flotante es duplicado.
Empty Element Height BugIE7, IE6Elementos vacíos hacen que su estructura obtenga altura.
Form Control Double Margin BugIE7, IE6horizontal margins on <input> and <textarea> elements are “inherited” from the ascendant with a margin and “layout”.
IE7 1px Dotted Border Appears As Dashed BugIE71 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 BugIE7, IE6Elementos 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 BugIE7: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 BugIE8El fondo rotará hacia arriba y hacia la izquierda en el estado :active cuando se aplica a <button> o a <input type=”submit”>.
Ignored :focus BugIE8Un selector que contenga :focus que esté seguido de otro selector simple, es ignorado.
Invisible Hover Border BugIE8Borde 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 BugIE8Margen 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 BugIE8Posición incorrecta o no se renderiza toda la lista de puntos negros cuando estos items tienen imágenes flotantes.
Non-Inherited TH Text-Align BugIE8Valor “text-align” ascendente no es heredado por el elemento padre.
32 Styles LimitationIE8, IE7, IE6Estilos son ignorados cuando están definidos en el 32 (o siguiente) método de estilo (Ej: <style>, <link> o @import).
Hover White Background Ignore BugIE7El fondo no cambia en :hover.
IE7 Child Selector Comment BugIE7Un selector que contenga un elemento hijo seguido de un comentario es ignorado.
Star HTML BugIE6selector * html no es ignorado en IE6 (siendo ignorado cuando esta es la primera parte del selector).
IE6 !important Ignore BugIE6La etiqueta “!important” es ignorada cuando la misma regla es definida nuevamente después.
PNG Image and Background Color MismatchIE8, IE7, IE6Los 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-BugIE8, IE7, IE6Margenes a los lados definidos con el valor “auto” no centran un elemento en bloque.
:first-line !important Rule Ignore BugIE8Reglas dentro del :first-line pseudo-class son completamente ignorados cuando el modificador “!important” es usado.
:first-letter Ignore BugIE6Toda la regla :first-letter es ignorada.
:first-letter !important Rule Ignore BugIE8Reglas dentro del :first-line pseudo-class son completamente ignorados cuando el modificador “!important” es usado.
Partial Click Bug v2IE7, IE6Solo 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 BugIE7, IE6Elementos flotantes se mueven hacia arriba como una escalera.
Disappearing List Background BugIE6El fondo en <li>, <dt>, <dd> desaparece.
noscript Ghost BugIE8, IE7, IE6Elementos <noscript> se muestran arriba cuando se permite Javascript; solo bordes/fondos se muestran en ella.
No Transparency Click BugIE8, 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 BugIE8Los <li> items caen debajo caen debajo de los puntos.
No Increase on <ol> Numbers BugIE7, IE6El número en los elementos <ol> no se incrementa en los subsiguientes <li>s.
No Bullets on <ul> and <ol> BugIE7, IE6Puntos/números desaparecen en los elementos <ul> y <ol>.
No line-height Vertical Center on Images BugIE7, IE6Las imágenes no están centradas verticalmente usando el método line-height.
No Background Image BugIE8, IE7, IE6No aparece fondo en IE cuando la imagen de fondo es usada (usando la propiedad “background” como shorthand).
Custom Cursor BugIE8, IE7, IE6Cursores personalizados no aparecen en IE
Leaking Background BugIE6El fondo se muestra fuera del elemento en otros elementos que estén cercanos en el flujo.
Expanding Height BugIE6El elemento es más largo que la altura especificada (mayormente se aplica en alturas pequeñas).
Expanding Width BugIE6El elemento es más ancho que la altura especificada.
Double Margin BugIE6Márgenes derecho e izquierdo son dobles en elementos flotantes.
Negative Margin BugIE7, IE6Parte del elemento que se encuentra fuera del contenedor (div, por ejemplo) desaparece cuando los márgenes negativos son usados.
Italics Float BugIE6El elemento cae abajo del elemento flotante con texto en cursiva.
3px Gap Bug aka Text Jog BugIE6Los 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 BugIE7, IE6La 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 bugVersiones afectadasDescripción
Scared of Floats BugIE7, IE6Elementos con layout flotan en vez de ir dentro de elementos flotantes
Border Chaos BugIE6Los bordes se disponen de forma caótica (se definen donde no se deben o no existen)
Sub-Hover BugIE6Reglas con selectores como a:hover foo{} no funcionan
Partial Click BugIE6Solo es posible clickar texto en enlaces (a>) que son estilizados con display: block
Disappearing Content BugIE6Algú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

PropiedadesVersiones afectadasDescripción
No Child Selector Support WorkaroundIE6Selector hijo ignorado
Max-Height WorkaroundIE6max-height no soportado
Max-Width WorkaroundIE6max-width no soportado
OpacityIE8, IE7, IE6Opacidad no soportada
Min-Width WorkaroundIE6Propiedad min-width no soportada
Min-Height WorkaroundIE6Propiedad min-height es ignorada

¿Y tú, sueles tener estos bugs a menudo o directamente no tienes en cuenta a Internet Explorer?

Vía | haslayout

Si te ha gustado este artículo, puedes recibir gratis más y mejor por RSS, Twitter, Facebook o correo electrónico. ¡Muchas gracias por leerme!