EDIT

// this file demonstrates how to use the CSS PIE extension for

// legacy versions of Internet Explorer. In many cases, PIE will allow

// you to style in CSS things that you'd have to do using image chops otherwise.

//

// Note: Each element that has PIE enabled on it will add about 10ms to your page load.

@import "compass/css3/pie";

@import "compass/css3";

// Set this to wherever you end up putting your behavior file.

//

// **Note:** this file must be served as a root-relative resource or

// else IE will interpret it as relative to the current webpage

// instead of the stylesheet.

//

// **Also Note:** this file must be delivered with a mime-type of:

//

//    text/x-component

$pie-behavior: url("/d7/test/scripts/polyfills/PIE.htc");

// It is suggested that you use Sass's @extend directive to apply the PIE

// behavior to your elements. Setting this variable will tell the `pie` mixin

// to extend it. Or you can just extend the base class yourself.

$pie-base-class: pie-element;

// There are two approaches to creating PIE elements

// The default approach is to make the element position: relative.

.pie-element {

  // relative is the default, so passing relative

  // is redundant, but we do it here for clarity.

  @include pie-element(relative);

}

.bordered {

  @include pie; // Because $pie-base-class is set, this results in an extend of .pie-element. 

  @include border-radius(5px);

}

.gradient {

  @include pie; // Because $pie-base-class is set, this results in an extend of .pie-element.

  @include background(linear-gradient(#f00, #00f));

}

// But sometimes this messes up your positioning

// So you can also use z-indexing. In this case

// an ancestor element before or having the first

// opaque background should be marked as a pie-container

// which gives it a z-index of 0 (actually any z-index

// can be provided to the pie-container mixin).

// And then the pie element itself should be given

// a z-index of -1.

.pie-container {

  @include pie-container;

}

.z-pie-element {

  // this will get a z-index of 0, you can pass a z-index value if you want

  @include pie-element(z-index);

}

// This is just a simple example of how to use the z-index approach.

.widget {

  @extend .pie-container;

  h3 {

    @include pie(z-pie-element); // This will extend .z-pie-element instead of .pie-element

  }

}

// Lastly, you can just include the pie-element mixin directly if you need to do a one-off:

.has-gradient {

  @include pie-element(relative);

  @include background(linear-gradient(#f00, #00f));

}