Introduction and rendering of IE for CSS3 compatibility using pie

IE10 the following version of the browser for some CSS3-compatible lead: Pie.js, pie.htc two ways to achieve

Official Website: http://css3pie.com/Demo address: http://css3pie.com/demos/gradient-patterns/

Important Function Realization: You can enable IE6, 7, 8, 9 to achieve similar chrome and Firefox 1. The more natural and realistic shadow effect, is no longer the old ugly filter effect.  2. Achieve a natural rounded corner effect of 3. Achieve some CSS3 effect, such as background image, border-image, stronger background gradient effect. 4. PNG image Transparency effect How to use:1. HTC is probably the browser patch mode CSS in the use of behavior to load can automatically achieve the effect,

1. #test {
2. border-radius:3px;
3. Behavior:url (PIE.HTC);
4. }
6. #test {
7. border-radius:3px;
8. Behavior:url (PIE.HTC);
9. }

Note the path, preferably by using the absolute path of the URL directly, if it is not possible to display the server side does not support the type of file format resolution, you can add a row at the end of the Mime.types file of the server configuration file: Text/x-component HTC, the specific way please Baidu under the bar   Method one summary, my own earliest use is this method, found when the spirit is not spirit, very depressed for a long time, and every place to write, Super trouble, finally almost all give up this plugin, and then found the method two. 2.. js mode, very flexible, simple download and decompression http://css3pie.com/download-latest use Pie.js file

4. ;

It is best to put it at the bottom of the body so that it can be included with the HTML page

Problem Description:    a.ie These CSS3 effect implementations are based on VML, a container element in which VML draws rounded corners or projection effects, and then the container element is inserted as the posterior sibling of the target element, if the target element Position:absolute or Position:relative, then this css3-container element will set the same Z-index value, in DOM tree, the elements of the sibling are always preceded by the overlay, so this overrides and avoids the possibility that other elements are just inserted. So, the problem is, if the current element of the position property is static, also is the default property, the Z-index property is not used, no coverage can be said, so at this time, ie browser CSS3 rendering is not successful. It is also easy to fix, setting the target element position:relative or setting the ancestor element position:relative and assigning a Z-index value (not 1). The Behavior property of the    b.ie browser is relative to the HTML document, unlike other CSS properties, not the CSS document. This makes the use of PIE.HTC files less square-changed. If the absolute path root directory, the CSS file is not convenient to move, if the relative path and HTML document, the PIE.HTC file on the different HTML page to see the reusability of the greatly reduced. Also, URL property paths, such as border-image, are difficult to handle.     C. Use pie to achieve the CSS3 rendering under IE (other methods are the same), only in the form of abbreviations, such as fillet effect, we can set the Border-top-left-radius to represent the upper left corner, but Pie does not support this type of writing, only the honest abbreviation.   D. In order to allow IE browser support HTC files, need a "text/x-component" the words of the content-type head, otherwise, will ignore behavior. The vast majority of Web servers provide the right content-type, but there are some problems.   E. For some reason you cannot modify a server configuration (such as a public host, or a server provided by a space service provider), you can use a PHP file to invoke the HTC file indirectly.  

Add a Content-type header with the word "text/x-component" through the PHP file, and invoke the PIE.HTC file. Need to put pie.php and PIE.HTC in the same folder directory, while the CSS behavior should be written in: Behavior:url (pie.php);

F. Direct transparency of current containers that have been executed for pie compatibility is no use, because JS will be reborn into a custom label stacked below, you can use the following steps to achieve transparency
CSS add

1. Css3-container {filter:alpha (opacity=98);}

JS add

1. $ ('. Test '). Prev (' Css3-container '). css ({' Filter ': ' Alpha (opacity=98) ', ' Opacity ': 0.98});