Ways to enable IE to support CSS3 fillet

Source: Internet
Author: User
Keywords Web page production CSS Tutorials
Tags basic behavior browser css3 download file html ie browser

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:

. 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 "-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.

Related Article

Beyond APAC's No.1 Cloud

19.6% IaaS Market Share in Asia Pacific - Gartner IT Service report, 2018

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

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.