How to enable IE browser to 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. Today we mainly explain if using CSS3 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 resolution of CSS3, only a less mainstream IE9 support CSS3 and HTML5 standards. Let IE support CSS3 resolution method There are many kinds, (HTML5 shiv– let the Damned IE series Support HTML5 bar), the following is a practical way to let IE support CSS3 parsing method--ie use the VML Vector Markup language as a brush to draw the fillet:

1. Download a compressed package that contains a Microsoft Script file (11KB) and a script file that is used to test whether the server has the correct content-type HTML file IECSS3.RAR;.HTC 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.


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.

Precautions:

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 in the IE browser these CSS3 effect implementation is to rely on VML, by the VML to draw the fillet or the 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".

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.