Methods for IE to support CSS 3 fillet properties

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.

Recommended topics: Web standardization--cross-browser development tutorials This article is mainly to explain if you use CSS 3 style sheet to achieve rounded corners, it is noteworthy that the IE6/7/8 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 compressed package that has a Microsoft Script file (11KB) and an HTML file to test whether the server has the correct content-type: The IECSS3.RAR;.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 to have 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:

. main{

border:2px solid #C0C0C0;

-moz-border-radius:10px;

-webkit-border-radius:10px;

border-radius:10px;

position:relative;

Z-index:2;

Behavior:url (here is the absolute path of the ie-css3.htc file);

}

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

Attention:

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 be 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 corner 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.

"Edit Recommendation"