Htc solution for IE compatible with css3 rounded corners

At present, the border-radius attribute of css3 can easily achieve the rounded corner function, which is undoubtedly a good thing for the front-end staff of the website, but the tragedy is that IE6/7/8 does not support it, it is impossible to discard the new technology, so we have found a solution-IE uses the VML Vector Markup language as the paint brush to draw the rounded corner:

Download a compressed package ie-css3.htc, which contains a Microsoft Script File (11 KB) and an HTML file used to test whether the server has the correct Content-Type ,. the htc file is a script file used to describe such behaviors after the IE kernel supports Web behaviors. They define a set of methods and attributes. Programmers can almost apply these methods and attributes to any element on the HTML page. Web behavior is great because they allow programmers to "connect" custom functions to existing elements and controls, rather than requiring users to download binary files (such as ActiveX controls) to complete this function.

Demo:

. Main {
Border: 2px solid # C0C0C0;
-Moz-border-radius: 10px;
-Webkit-border-radius: 10px;
Border-radius: 10px;
Position: relative;
Z-index: 100;
Behavior: url (here is the absolute path to the ie-css3.htc file );
}

The Webkit kernel browser supports the "-webkit-border-radius: 10px;" attribute (10 px indicates the radius of the rounded corner) and can parse the rounded corner directly; the Firefox browser supports the "-moz-border-radius: 10px;" attribute, which can also be directly parsed to produce rounded corners. For IE browsers, you need to add the "border-radius: 15px;" attribute. 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, therefore, you must enter an absolute path for pages generated by dynamic programs such as Wordpress.

2. The positioning attribute must be position: relative;

3. In IE browser, the implementation of these CSS3 effects is to use VML to draw rounded corners or projection effects by using VML. Therefore, a z-index attribute is also required. It is best to set the z-index attribute to a large value, for example, 2.

4. If some modules in the IE browser cannot use this rendering, you can try to absolutely locate the corresponding layer, that is, add the attribute "width: 400px; height: 400px.

5. The radius attribute 10px is the radius of the rounded corner. You can also give two values, such as "border-radius: 10px 5px;". In this way, the radius between the upper left corner and the lower right corner is 10px, the radius between the upper-right corner and the lower-left corner is 5 px. You can also assign four values to "top right bottom left ".