Use of pie

It actually refers to an HTC file named Pie, that is, pie. HTC, using the behavior of CSS, can call this file, and then let IE also implement some common css3 effects, such as border-radius, box-shadow ), gradient and multiple background images ).

: Main css3 properties supported by the https://github.com/lojjic/PIE/downloads: 1. the border-radius rounded corner CSS code is as follows :. pie_radius {width: 250px; Height: 250px; Background-color: # 34538b;-moz-border-radius: 10px;-WebKit-border-radius: 10px; border-radius: 10px; behavior: URL (pie. HTC);} the HTML code is as follows: <Div class = "pie_radius"> </div> 2. the CSS code for Box-shadow box shadow is as follows :. pie_box_shadow {width: 250px; Height: 250px; Background-color: # 34538b;-moz-box-Shadow: 1px 3px #666;-WebKit-box-Shadow: 1px 3px 3px #666; box-Shadow: 1px 3px 3px #666; behavior: URL (pie. HTC);} the HTML code is as follows: <Div class = "pie_box_shadow"> </div> 3. the gradient CSS code is as follows :. pie_gradient {width: 250px; Height: 250px; Background-color: #9f9; Background:-WebKit-gradient (linear, 0 0, 0 bottom, from (#9f9 ), to (#393); Background:-moz-linear-gradient (#9f9, #393);-pie-Background: Linear-gradient (#9f9, #393 ); behavior: URL (pie. HTC);} the HTML code is as follows: <Div class = "pie_gradient"> </div> 4. Problem description: A.In IE, these css3 effects are implemented by using VML, which is used to draw container elements with rounded corners or projection effects. Then, this container element is inserted as the back brother node of the target element, if the target element position: absolute or position: relative, the css3-container element will be set with the same Z-index value, in the DOM tree, the same level of elements always follow the overwrite previous, therefore, overwrite is implemented, and other elements may be inserted. The problem arises. If the current position attribute of an element is static, that is, the default attribute, the Z-index attribute is useless and does not have to be overwritten, in this case, CSS 3 rendering in IE will not be successful. It is easy to solve. Set the target element position: relative or set the ancestor element position: relative and assign a z-index value (not-1 ). BThe behavior attribute of the. IE browser is relative to the HTML document. It is different from other CSS attributes, not relative to the CSS document. This makes pie. HTC files not easy to use. If the absolute path is in the root directory, the CSS file cannot be moved. If the relative path is different from the HTML file, the reusability of the pie. HTC file on different HTML pages is greatly reduced. At the same time, URL attribute paths after such as border-image are not easy to handle. C.Use pie to Implement CSS 3 rendering under IE (the same is true for other methods). You can only use abbreviations, such as corner effects. You can set border-top-left-radius to indicate the top left corner, however, pie does not support this method. It can only be an honest abbreviation. D.To enable IE to support HTC files, a Content-Type header with the words "text/X-component" is required. Otherwise, behavior is ignored. The vast majority of web servers provide the correct content-type, but there are still some problems. E. For some reason, you cannot modify the server configuration (for example, a public host or a server provided by a space service provider). You can use a PHP file to indirectly call the HTC file. <? PHP header ('content-type: text/X-component '); Include ('pie. HTC');?> Add a Content-Type header containing "text/X-component" using the PHP file and call the pie. HTC file. Put pie. php and pie. HTC in the same folder directory, and write behavior in CSS as: Behavior: URL (pie. php );

Use of pie