Solucin a 10 propiedades CSS no compatibles con IE6

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 tambin puedes ver la lista de bugs en Internet Explorer con
su solucin que publiqu anteriormente.
Hay otros 8 problemas tpicos que se pueden resolver. Estos se encuentran en:
http://www.catswhocode.com/blog/8-javascript-solutions-to-common-css-problems

1. Bordes redondeados
Aunque ya os mostr una solucin 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 continuacin se muestra como
hacerlo:
1. Ve a tu Cpanel y haz click en un enlace llamado MIME Types Link.
2. Debajo de MIME Type, aade text/x-component.
3. Debajo de las extensiones, aade htc.
4. Reinicia el servidor web Apache.
Para mas detalles de cmo aadir 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 cdigo en tu archivo CSS:
.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 diseadores 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):
.div_class_name{
behavior:url(border-radius.htc);
}

Alternativa HTC: Si la solucin anterior no te funciona, puedes probar esta: HTC.

Si necesitas soporte en la propiedad background-position, ve a: DD_belated.
La solucin que recomiendo es usar un .gif en vez de PNG o un PNG-8.

3. Opacidad
Este hack es mucho ms sencillo de aplicar para que la opacidad funcione en Internet Explorer.
Aplica este cdigo donde deseas que funcione la opacidad:
.opacity_div {
filter: alpha(opacity = 50);
}

4. Posicin Fixed
Todos los navegadores soportan la propiedad fixed pero IE 6 no. Os mostraremos varias
soluciones para arreglar este fallo. Copia y pega este cdigo donde desees que funcione la
propiedad fixed:
* html .fixed_div{
position: absolute; /* position fixed para IE6 */
top:
expression(104+((e=document.documentElement.scrollTop)?e:document.body.scroll
Top)+'px');
left:
expression(15+((e=document.documentElement.scrollLeft)?e:document.body.scroll
Left)+'px');
}

Solo cambia los valores top (104) y left (15) por la posicin 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 cdigo:
* html {
background-image: url(image.jpg);
}

Todo lo que necesitas es una imagen de 1px por 1px. Suena chapuza pero debera funcionar!

5. Min-width y Max-width
Para hacer que funcione la propiedad min-width, podemos probar con esto:
.div_miclase{
width: expression(document.body.clientWidth < 1000? "1000px" : "auto");
}

Para la propiedad max-width:

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

Alternativa en Javascript: Se muestra una alternativa a la solucin anterior: JQminmax es un

plugin que te permitir definir los valores mximos y mnimos para la altura y anchura.

6. Hover para elementos no anchor

IE6 solo soporta :hover para etiquetas con anchor. Esto significa que los submens basados en
CSS no funcionarn en IE6. CSSHover.htc es la mejor solucin en estos casos. Puedes descargar
el archivo desde xs4all.nl. El cdigo CSS a aplicar para que funcione es este:
body {
behavior: url("csshover3.htc");
}

Como dije en el hack nmero 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 cdigo (podra no considerarse un hack ya que utiliza CSS vlido):
.div_class_name{
min-height: 140px;
height: auto !important;
height: 140px;
}

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

8. Escalado bicbico para imgenes

Una lnea arregla todo este fallo. Podemos saber ms de este hack en el blog de Chris Coyier:
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 imgenes de fondo para mostrar el texto del botn. IE6 no
soporta la propiedad text-indent en los botones as que debemos usar este cdigo CSS:
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 ms usados en IE:
.text_shadow{
filter: Shadow(Color=#999999, Direction=135, Strength=5);
height: 1%;
}

Eso es todo! Recordamos que podis ver la lista de bugs en Internet Explorer 6, 7 y 8 por si
tenis ms errores no resueltos en esta entrada, o tambin podis hojear las herramientas para
comprobar tu sitio en IE.
Una pequea curiosidad: Si a alguien le gusta la imagen con la que ilustr la entrada, puede verla
en un formato ms grande.
Va | Productivedreams