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 bug Versiones afectadas Descripción
Image Label Focus Bug IE8, IE7, IE6 Elementos<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 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 <html> que puede aparecer como bug con referencia a “overflow” en <body>.
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 <input> and <textarea> elements are “inherited” from the ascendant with a margin and “layout”.
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 <button> o a <input type=”submit”>.
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: <style>, <link> o @import).
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 <li>, <dt>, <dd> desaparece.
noscript Ghost Bug IE8, IE7, IE6 Elementos <noscript> se muestran arriba cuando se permite Javascript; solo bordes/fondos se muestran en ella.
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 <li> items caen debajo caen debajo de los puntos.
No Increase on <ol> Numbers Bug IE7, IE6 El número en los elementos <ol> no se incrementa en los subsiguientes <li>s.
No Bullets on <ul> and <ol> Bug IE7, IE6 Puntos/números desaparecen en los elementos <ul> y <ol>.
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

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!