Opacity
Algo tan sencillo como la propiedad ‘opácity’ se vuelve un quebradero de cabeza al pensar en ie, pues se necesita una forma diferente para ie7/ie8 y respetar el orden en las dos declaraciones:
Navegadores Modernos ↓ :
.elemento {opacity: .5;} /*'-moz-opacity' para versiones antiguas de FF*/
Internet Explorer ↓ :
.elemento { -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; /*primero ésta para ie8*/ filter: alpha(opacity=50);/*y esta para ie7*/}
text-shadow
.elemento {text-shadow: 1px 1px 3px #000;} .elemento {filter: glow(color=#000,strength=3);} .elemento2 {filter: dropshadow(color=#ffff00,offX=5,offY=5);} Puedes usar cualquiera de los 2 filtros: Más información. Otras formas para la sombra en el texto: Con mootools.
Box-shadow:
.elemento { -moz-box-shadow: 2px 2px 3px #969696; -webkit-box-shadow: 2px 2px 3px #969696; box-shadow: 10px 10px 5px #000; } .elemento {filter: progid:DXImageTransform.Microsoft.DropShadow(color=#969696, offx=1, offy=1) progid:DXImageTransform.Microsoft.DropShadow(color=#C2C2C2, offx=1, offy=1) progid:DXImageTransform.Microsoft.DropShadow(color=#EFEFEF, offx=1, offy=1);} .otra_forma { zoom: 1; filter: progid:DXImageTransform.Microsoft.Shadow(color='#969696', Direction=135, Strength=3);}Amplía la información: ole-laursen y en microsoft.
Esquinas redondeadas:
.elemento { border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; } http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js</a>"> $(function(){ $('.box').corners('10px'); }); Hay muchos otros scripts para lograrlo. Una recopilación de distintas técnicas.
Pseudo-selectores:
| :nth-child | :nth-last-child | :nth-of-type | :nth-last-of-type | :first-child | :last-child | : only-child | :first-of-type | :last-of-type | :only-of-type | :empty <script type="text/javascript" src="[..library..]"></script> <script type="text/javascript" src="ie-css3.js"></script> Haciendo uso de ‘ie-css3.js’. Amplía la información: ie-css3.js y una reseña en Anieto2k
RGBA:
‘Opacity’ en los colores sin que sea heredada por los hijos.
.elemento {background: rgba (0,0,0, .5)} color-block { background:transparent; filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000050,endColorstr=#99000050); zoom: 1; } Amplía la información: css-tricks.
Girando elementos:
.elemento { -webkit-transform: rotate(240deg); -moz-transform: rotate(240deg); transform: rotate(240deg);} object.style.filter = "progid:DXImageTransform.Microsoft.Matrix(sProperties)" Amplía la información: microsoft.
Multiples Columnas:
.elemento { -moz-column-width: 300px; -webkit-column-width: 300px; -moz-column-gap: 10px; -webkit-column-gap: 10px; column-width: 300px; column-gap: 10px; } No he encontrado ningún filtro que transforme un texto en columnas en los ie, pero sí utilizando algún .js como jQuery y su función columnize():
$('#mydiv').columnize(); $('#myotherdiv').columnize({ width: 200 }); $('#mythirddiv').columnize({ columns: 2 });
Amplía la información y ejemplos: aquí.
Habilitando Html 5 en ie:
Como siempre, la solucción viene de terceros: google. Carga el script html5.js:
Vía remysharp.
