Es algo que me encontré en Google, la idea es simple, IE, como todo sabemos, es un Explorador que tiene muchos errores al interpretar el código CSS, es así que cuando queremos hacer algo bien hecho, IE nos da muchas dificultades.
En mi caso, yo estaba haciendo una caja con bordes redondeados, algo simple... pero IE dio en manifiesto su peculiar forma de interpretar el CSS, desarmando mi cajita.
Mi caja consta de dos imágenes laterales con bordes redondos, y una línea como relleno del espacio entre extremo y extremo, esta línea es repetida una y otra vez, y da la sensación de una imagen de 300px de ancho, pero en realidad es una imagen de 2px de ancho.
El problema radico en la interpretación del width.
div#linea {
width:300px;
height:50px;
background-image:url(../images/pie_linea.jpg);
background-repeat:repeat-x;
}
El contenedor de los extremos de la línea de relleno es de 300px, y como el relleno pasa por debajo de los bordes, le di el mismo ancho del contenedor para que se vea mejor la aplicación de este "truco".
esto se veía bien en FF y en Opera...
Pero no en IE..
Cambio de ancho (width) de 300 a 272px
/*CSS para IE*/
div#linea {
width:272px;
height:50px;
background-image:url(../images/pie_linea.jpg);
background-repeat:repeat-x;
}
Creo que esta Claro... el código es leído por IE y funciona...
Pero este cambio de Width de 300 a 272px, no funciona en FF y en Op.
Así que sólo queda hacer un CSS para IE y otro para el resto del mundo... se puede usar infinidad de trucos, y maromas en el css, para hacerlo compatible con todos los navegadores (IE y el resto de navegadores)... pero este, es el que entendi y me parece facil y simple, sobre todo para quienes nos iniciamos en esto del CSS y XHTML
/*Css para IE*/
div#linea {
width:272px;
height:50px;
background-image:url(../images/pie_linea.jpg);
background-repeat:repeat-x;
}
/*CSS anti IE*/
html>body div#linea {
width:300px;
height:50px;
background-image:url(../images/pie_linea.jpg);
background-repeat:repeat-x;
}
El truco esta en la misma mala programación de IE, y es que IE no lee este tipo de formato de CSS2 (según entiendo).
Cuando escribimos esto:
#linea
Nos referimos a una etiqueta que tiene como id = "linea"
div#linea
Nos referimos a un div que tiene como id = "linea"
html>body div#linea
Nos referimos especificamente a un div cuyo id es "linea", que se encuentra dentro de la etiqueta body, que a su vez esta dentro de la etiqueta html.
Este tipo de estructura es la que no entiende IE... pero es entendida por el resto de navegadores (FF y op, no probé con otros).
Al parecer este tipo de estructura (para FF y Op ) tiene mayor importancia, ya que ignora la primera y usa la segunda, y claro, el pobre de IE usa la primera porque la segunda no la entiende.
Y todos felices.
Esto no tiene como objetivo enseñar a construir cajas con bordes redondeados.
para este tipo de problema puede haber muchas soluciones... pero la use para dar a conocer este pequeño y facil truco.Espero les Sirva
Saludos 
