Con la llegada de CSS3 cada vez es más común que muchos elementos sean descartados por Internet Explorer en cualquiera de sus versiones.

  • Elementos con efectos blur
  • Esquinas redondeados

Lo que nos complica la vida como programadores, sin embargo como expertos en compatibilidad, nos damos a la tarea de buscar la forma de lograr hacer que estos nuevos elementos funcionen.

En caso de que nos lleguemos a encontrar con estas situaciones lo primero que debemos hacer es:

Escribir el codigo de CSS como comun mente lo hacemos:

 


01<br />
02.box {<br />
03 -moz-border-radius: 15px; /* Firefox */<br />
04 -webkit-border-radius: 15px; /* Safari and Chrome */<br />
05 border-radius: 15px; /* Opera 10.5+, future browsers, and now also Internet Explorer 6+ using IE-CSS3 */</p>
06<p>  -moz-box-shadow: 10px 10px 20px #000; /* Firefox */<br />
07 -webkit-box-shadow: 10px 10px 20px #000; /* Safari and Chrome */<br />
08 box-shadow: 10px 10px 20px #000; /* Opera 10.5+, future browsers and IE6+ using IE-CSS3 */</p>
09<p>  behavior: url(ie-css3.htc); /* This lets IE know to call the script on all elements which get the 'box' class */<br />
10}<br />

(Descargar ie-css3.htc)

Adicionalmente debemos contar con el archivo htc (HTML Components) con el que vamos a trabjar (ie-css3.htc, border-radius.htc) el cual será el script encargado de proveer soporte para los elementos que nuestro CSS necesite.

Ejemplo:

 


1<br />
2.curved {<br />
3 -moz-border-radius:10px;<br />
4 -webkit-border-radius:10px;<br />
5 behavior:url(border-radius.htc);<br />
6}<br />

 


1<br />
2&lt;div class=&quot;curved&quot;&gt;Div con esquinas redondeadas&lt;/div&gt;<br />

(Descargar border-radius.htc)

 

Para nuevas versiones

http://code.google.com/p/curved-corner/downloads/detail?name=border-radius.htc

Por admin

Deja una respuesta