fallos-ie6-solucion-hacks4

Cuando creas un sitio web o un blog, muchas veces nos fijamos en que Internet Explorer 6 no soporta algunas propiedades que hemos aplicado, mientras que otros navegadores sí. Esto puede ser un asunto muy engorroso para el desarrollador, se empieza a poner nervioso sin encontrar la solución a su fallo.

En esta entrada recopilaré algunas de las propiedades que no pueden implementarse correctamente en Internet Explorer 6 (dado que no son compatibles) e iré indicando sus respectivas soluciones. Si lo deseas también puedes ver la lista de bugs en Internet Explorer con su solución que publiqué anteriormente.

1. Bordes redondeados

Aunque ya os mostré una solución para crear bordes redondeados en Internet Explorer, aquí os la muestro de nuevo:

Podemos usar un archivo .HTC, pero para ello debemos asignar el correcto MIME Type para htc behavior en tu servidor. Es muy importante realizar este paso. A continuación se muestra como hacerlo:

1. Ve a tu Cpanel y haz click en un enlace llamado MIME Types Link.

2. Debajo de MIME Type, añade text/x-component.

3. Debajo de las extensiones, añade htc.

4. Reinicia el servidor web Apache.

Para mas detalles de cómo añadir MIME Type visita el soporte de Microsoft.

Todo lo que necesitas hacer para aplicar bordes redondeados en IE6 es descargar el HTC desde HTMLremix o un enlace alternativo e incluir el siguiente código en tu archivo CSS:

Select Code
.div_class_name{
behavior:url(border-radius.htc);
}


Alternativa en Javascript: JQuery Corner es una alternativa en Javascript que te permitirá crear bordes redondeados compatibles en todos los navegadores.

2. El popular fallo de la transparencia PNG

Muchos diseñadores deben utilizar transparencia en sus proyectos, ¿por qué limitarla? Existen muchos recursos con los que podemos solucionar este error. Os mostraré unos cuantos:

Aplicando la propiedad filter (de Microsoft):

Select Code
.class_name{
_background:none;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (src='image_name.png', sizingMethod='scale');
}


Alternativa HTC: Si la solución anterior no te funciona, puedes probar esta: HTC.

Si necesitas soporte en la propiedad background-position, ve a: DD_belated.

La solución que recomiendo es usar un .gif en vez de PNG o un PNG-8.

3. Opacidad

Este hack es mucho más sencillo de aplicar para que la opacidad funcione en Internet Explorer. Aplica este código donde deseas que funcione la opacidad:

Select Code
.opacity_div {
filter: alpha(opacity = 50);
}

4. Posición Fixed

Todos los navegadores soportan la propiedad “fixed” pero IE 6 no. Os mostraremos varias soluciones para arreglar este fallo. Copia y pega este código donde desees que funcione la propiedad “fixed”:

Select Code
* html .fixed_div{
position: absolute; /* position fixed para IE6 */
top: expression(104+((e=document.documentElement.scrollTop)?e:document.body.scrollTop)+'px');
left: expression(15+((e=document.documentElement.scrollLeft)?e:document.body.scrollLeft)+'px');
}


Solo cambia los valores top (104) y left (15) por la posición que quieras darle a tu elemento.

El problema de esto es, que al mover la barra de desplazamiento, nos va a tirones, esto lo podemos arreglar insertando este código:

Select Code
* html {
background-image: url(image.jpg);
}


Todo lo que necesitas es una imagen de 1px por 1px. ¡Suena chapuza pero debería funcionar!

5. Min-width y Max-width

Para hacer que funcione la propiedad min-width, podemos probar con esto:

Select Code
.div_miclase{
width: expression(document.body.clientWidth < 1000? "1000px" : "auto");
}


Para la propiedad max-width:

Select Code
.div_miclase{
width: expression(document.body.clientWidth > 1000? "1000px" : "auto");
}


Alternativa en Javascript: Se muestra una alternativa a la solución anterior: JQminmax es un plugin que te permitirá definir los valores máximos y mínimos para la altura y anchura.

6. Hover para elementos no anchor

Desafortunadamente IE6 solo soporta :hover para etiquetas con anchor. Esto significa que los submenús basados en CSS no funcionarán en IE6. CSSHover.htc es la mejor solución en estos casos. Puedes descargar el archivo desde xs4all.nl. El código CSS a aplicar para que funcione es este:

Select Code
body {
behavior: url("csshover3.htc");
}


Como dije en el hack número 2 (transparencia PNG) no olvides definir el correcto MIME Type para htc behavior en tu servidor, esto es fundamental.

7. Min-height y Max-height

Min-height:

Aplicamos este código (podría no considerarse un hack ya que utiliza CSS válido):

Select Code
.div_class_name{
min-height: 140px;
height: auto !important;
height: 140px;
}


Max-height:

Select Code
.div_class_name{
height: expression( this.scrollHeight > 199 ? "200px" : "auto" );
}

8. Escalado bicúbico para imágenes

Una línea arregla todo este fallo. Podemos saber más de este hack en el blog de Chris Coyier:

Select Code
img {
-ms-interpolation-mode: bicubic;
}

9. Text-indent negativo para input button

El valor text-indent normalmente es utilizado para esconder valores de texto dentro de los botones, por lo que podemos usar imágenes de fondo para mostrar el texto del botón. IE6 no soporta la propiedad text-indent en los botones así que debemos usar este código CSS:

Select Code
input.button {
width:114px;
height:37px;
border: none;
background: transparent url(images/button_image.gif) no-repeat center;
overflow: hidden;
text-indent: -999px;
}

10. Text-shadow

Este filtro para la propiedad text-shadow es uno de los filtros más usados en IE:

Select Code
.text_shadow{
filter: Shadow(Color=#999999, Direction=135, Strength=5);
height: 1%;
}


¡Eso es todo! Recordamos que podéis ver la lista de bugs en Internet Explorer 6, 7 y 8 por si tenéis más errores no resueltos en esta entrada, o también podéis hojear las herramientas para comprobar tu sitio en IE.

Una pequeña curiosidad: Si a alguien le gusta la imagen con la que ilustré la entrada, puede verla en un formato más grande.

Vía | Productivedreams

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!

 
Udemy