How to make IE support CSS3 fillet

Source: Internet
Author: User

if you want to achieve the effect of fillet in IE, we will generally use the way of rounded pictures. With a picture, it doesn't have much to do with the browser, because any browser supports this approach.

In this article we mainly explain if the CSS 3 style sheet to achieve the fillet effect, it is worth noting that the IE6/7/8 three versions of IE browser does not support the parsing of CSS 3, only the less mainstream IE 9 support CSS 3 and HTML 5 standards. Let IE support CSS 3 parsing methods have many kinds, the following is a practical way to let IE support CSS 3 parsing method--ie use the VML Vector Markup language as a brush to draw the fillet:

1, download a compressed package, there is a Microsoft Script file (11KB) and a test server for the correct content-type HTML file: Iecss3.rar;. An HTC file is a script file that is used to describe such behavior after the IE kernel supports web behavior. They define a set of methods and properties 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 allow users to download binaries (such as ActiveX controls) to complete this function.

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

After decompression, open the 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 to the ie-css3.htc file);  

 

Browser support for WebKit kernel "-webkit-border-radius:10px;" Properties (10px is the radius of the fillet), you can directly parse out the fillet; Firefox browser supports "-moz-border-radius:10px;" attribute, can also directly parse out the fillet, ie Department browser need to add "border-radius:15px;" 's Properties.

Attention:

1, behavior the URL must fill in the absolute path of IE-CSS3.HTC, because IE browser to find the file is relative to the current HTML file path to find, so for WordPress and other dynamic program generated pages must fill in the absolute path.

2, must have the positioning attribute: position:relative;

3, because the implementation of these CSS 3 effect in IE browser is to rely on VML, from VML to draw the fillet or projection effect, so also need a Z-index property. The Z-index property is best set to be larger, such as 2.

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

5, RADIUS attribute 10px is the fillet radius, you can also give two values such as "border-radius:10px 5px;", so that the upper-left corner and the lower-right corner radius is 10px, the upper-right corner and the lower-left corner radius is 5px. You can also assign a value of 4 to "top right bottom left".

How to make IE support CSS3 fillet

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.