Ways to enable IE to support CSS3 fillet

If you want to achieve the effect of rounded corners in IE browser, we usually adopt the way of fillet picture. With pictures, the basic is not much of a relationship with the browser, because any browser support this way.

This article we mainly explain if using CSS 3 style sheet to achieve fillet effect, it is noteworthy that the ie6/7/8 of the three IE browser versions do not support CSS 3 parsing, only the less mainstream IE 9 support CSS 3 and HTML 5 standards. There are many kinds of parsing methods that allow IE to support CSS 3, the following introduces a practical method for IE to support CSS 3 parsing IE uses VML Vector Markup language as a brush to draw rounded corners:

1, download a compression package, which has a Microsoft Script file (11KB) and a test server for the correct content-type HTML file: Iecss3.rar; The HTC file is a script file that describes such behavior after the IE kernel supports web behavior. They define a set of methods and attributes that programmers can apply to almost any element on an HTML page. Web behavior is great because they allow programmers to "connect" custom functionality to existing elements and controls, rather than having users download binaries, such as ActiveX controls, to do this.

Download Address: Http://www.iefans.net/wp-content/uploads/2010/12/iecss3.rar

After decompression, open test.html, if the display effect is rounded, you can continue.

Use Demo:

WebKit Kernel browser support "-webkit-border-radius:10px" Properties (10px is rounded corner radius), can directly parse out the fillet; Firefox browser supports "-moz-border-radius:10px;" property, you can also directly parse the fillet, ie browsers need to add "border-radius:15px;" Properties.

Note：

1, Behavior URL must fill in the absolute path of the IE-CSS3.HTC, because IE browser to find the file is relative to the current HTML file path to find, so for dynamic programs such as WordPress generated pages must fill in the absolute path.

2, must have positioning attributes: position:relative;

3, because in IE browser the implementation of these CSS 3 effect is to rely on VML, by VML to draw rounded corners or projection effect, so also need a z-index attribute. Z-index properties are best set to larger, such as 2.

4, if some modules in IE browser can not use this rendering, you can try to absolutely locate the corresponding layer, that is, plus "width:400px;" height:400px; " Property。

5, Radius property 10px is fillet radius, can also give two values such as "border-radius:10px 5px," so that the upper left and lower right corner radius of 10px, upper right corner and lower left corner radius is 5px. You can also assign 4 values to upper right and lower left.