Rounded Borders, Gradients for IE7 and IE8 with CSS3 PIE

CSS3PIE helper script can help to use regular CSS3 properties to style IE7 and IE8 browsers HTML. It adds support for border-radius, box-shadow, border-image, multiple background images and linear-gradient as background image to old Internet Explorer browsers and IE9.

Supported features are here. However, there are multiple problems when you’ll try to use this script with more complex layouts. The PIE provides some help to resolve this problems.

Easiest thing that helps is adding to surrounding elements and the PIE element sometimes:

position:relative;
zoom:1

And when backgrounds are disappearing add to affected element:

/*resolves problems with backgrounds*/
z-index:10

In IE7 when layout is not properly updated after loading when applying PIE, not properly counted size, weird size bugs:

/* Watch elements ancestors changes */
-pie-watch-ancestors: 1;
/* Tracking size and position changing */
-pie-poll:true;

When you want to delay PIE script rendering of currently hidden elements for faster page load:

-pie-lazy-init:true;

Download the script here.

Share:
This entry was posted in Browsers Testing and tagged . Bookmark the permalink.

1 Response to Rounded Borders, Gradients for IE7 and IE8 with CSS3 PIE

  1. bayanlara özel masaj says:

    I had been looking everywhere for this and finally found this post. Exactly what I needed!

Leave a Reply

Your email address will not be published. Required fields are marked *