Se encuentra usted aquí

CSS3 en Internet Explorer con CSS3 PIE

Activado 14 Nov, 2011 Por Adolfo 27 Comentarios

Uno de los principales problemas con el que nos encontramos los desarrolladores web es el de la presentación de los resultados y el hacer que se presente en todos los navegadores de una forma similar. Este problema se convierte en pesadilla cuando hablamos de Internet Explorer, sobretodo en las versiones anteriores a la 9. Ahora esto se soluciona en parte con CSS3 PIE.

Esta utilidad nos permite utilizar los elementos CSS3 para generar border redondeados (border-radius), sombras (box-shadow) o difuminados en el fondo (linear-gradient) entre otras.

Utilización de CSS3 PIE

La utilización de CSS3 PIE es muy sencilla. Basta con añadir la propiedad behaviour a las características del elemento en la hoja de estilos. así, para definir los bordes redondeados de un elemento deberíamos utilizar el siguiente CSS:

border: 1px solid #696;
padding: 60px 0;
text-align: center; width: 200px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
background: #EEFF99;
behavior: url(/PIE.htc);

La última línea indica que se ha de utilizar el comportamiento para Internet Explorer de CSS3. Por supuesto se ha de indicar la ruta correcta al archivo PIE.htc. IE requiere que en caso de indicar la ruta completa el servidor indicado sea el mismo que está sirviendo la página.

Hemos de tener cuidado con la utilización de este comportamiento ya que si abusamos de el, por ejemplo lo definimos con un * al principio para que pueda ser utilizado por todos los elementos, generaremos un proceso muy grande y ralentizará en exceso la página, ya que para cada elemento se realizará la adaptación, aunque no sea necesaria.

Problema con el tipo de contenido

Internet Explorer necesita que el behaviour sea servido con un tipo de contenido (content type) de "text/x-component". Esto no está disponible en todos los servidores para los archivos .htc. Se puede solucionar de dos formas. La primera es modificar el .htaccess con la siguiente línea:

AddType text/x-component .htc

En caso de no poder añadir esta línea al .htaccess, se puede utilizar directamente el archivo PIE.php en el behaviour, con lo que solucionamos también el problema.

behavior: url(PIE.php);

Problema cuando desaparece el contenido

Un problema que nos hemos encontrado es que al utilizar el behaviour, el contenido modificado ha desaparecido de la presentación en Internet Explorer. Esto es debido a un problema en la presentación con la posición estática (por defecto en muchos campos). La solución es muy sencilla y consiste en indicar que la posición del elemento es relativa. Con esto queda solucionado.

position:relative;

Esperamos que a partir de ahora sea más sencillo desarollar para versiones anteriores de Internet Explorer.

Etiquetas:

CSS

Diseño

Internet Explorer

Comentarios

ninjadeden (no verificado)

Jue, 22/11/2018 - 03:22

Se encuentra usted aquí

CSS3 en Internet Explorer con CSS3 PIE

Utilización de CSS3 PIE

Problema con el tipo de contenido

Problema cuando desaparece el contenido

Comentarios

Añadir nuevo comentario

Filtered HTML

Plain text