Let Ie6/ie7/ie8 browser support CSS3 Properties

Source: Internet
Author: User

First, download

Search Download: IE-CSS3.HTC, it is the key to let IE support CSS3 performance.

Second, what's on the top?

First of all, say. htc file,. htc file is a script file, personally think with JS file belongs to the same goods, just, it seems that HTC is an Internet Explorer (IE) bastard, only IE to recognize it. HTC files can be used to describe web behavior, and Web behavior allows programmers to "connect" custom functionality to existing elements and controls, rather than having to let users download binaries (such as ActiveX controls) to do this.

This article ie-css3.htc, let IE browser support some properties of CSS3. Yes, it is through the script for IE browser to add some of the CSS3 standard behavior (more popular several). The first major script for this HTC is as follows:

function supportsvml () {if (typeof supportsvml.supported = = "undefined") {var a = Document.body.appendChild ( Document.createelement (' div ')); a.innerhtml = ' <v:shape id= "Vml_flag1" adj= "1"/> "; var b = a.firstchild; b.style.behavior = "url (#default #vml)"; supportsvml.supported = b? typeof B.adj = = "Object": True;a.parentnode.removechild (a);} Return supportsvml.supported}

Sensible understand basically know, this does not with JS script a mold out of. In other words, HTC is just a JS script to South Korea to complete a capacity, for a pair of vest only.

Third, how to work

To say the principle of work, there must be a new role, that is, "VML." VML is the abbreviation for the vector Markup Language (vectorial Markup Language). The markup language used by VML to vectorize graphics data. This is a language based on XML syntax that is presented to the company by AutoDesk, Macromedia, and Microsoft and HP. VML is equivalent to the brush inside IE, can achieve the graphics you want, and combined with the script, you can make the graphic dynamic effect. VML was released by Microsoft September 1999 with IE5.0.

If you want me to say, I think it is IE browser's Queen's paintbrush, specifically for IE painting. So, ie illegitimate children HTC plus ie private brush VML can realize some IE proprietary graphics and performance, just can achieve some of the CSS3 effect IE does not support.

Ps:

VML is equivalent to the brush inside IE, can achieve the graphics you want, and combined with the script, you can make the graphic dynamic effect. VML was released by Microsoft September 1999 with IE5.0, and in my opinion, VML is actually a product of word and HTML. Word documents can be saved as HTML, where the text and pictures can be easily converted, but if the hand-drawn graphics in the past IE can not be explained, if all converted to graphics files is not very realistic. So Microsoft put the graphics control in Word into IE, so that IE also has a drawing function.

The XML thesaurus, originally developed by Microsoft, is now supported for VML only IE5.0.

Using VML can draw vector graphics in IE, so some people think that VML is the function of the brush in IE.

Iv. How to use

It is easy to use, see the following sample code:

. box {  -moz-border-radius:15px;/* Firefox *  /-webkit-border-radius:15px;/* Safari and Chrome */  Border-radi us:15px;  /* Opera 10.5+, as well as using IE-CSS3 's IE browser */  -moz-box-shadow:10px 10px 20px #000;/* Firefox */  -webkit-box-shadow:10px 10px 20px #000; /* Safari and Chrome */  box-shadow:10px 10px 20px #000,/* Opera 10.5+, and IE browser using IE-CSS3 *  /Behavior:url (IE-CSS3 . HTC); /* Notify IE Browser invoke script to act on ' box ' class */}

As you can see, in addition to the last addition of behavior, the CSS3 attribute is the CSS3 attribute, which does not require makeup, retouching, or incarnation as a transformer, which is the advantage of this approach.

V. Questions and necessary explanations

After all, not the browser's own properties, the use of the problem is unavoidable, here are some considerations, it can be said that the limitations of the method:

    1. The current element must have a positional property, such as a position:relative or Position:absolute attribute.

    2. Z-index value must be higher than the surrounding elements, otherwise ... can only say sorry ~ ~

Vi. supported styles and status descriptions

See the table below:

style effective Invalid
Border-radius Set fillet properties for element Four Corners
Element border
Just set a corner of the fillet property
Box-shadow Blur size parameter
Offset value
Colors other than black (#000) are not supported
Text-shadow Blur size parameter
Offset value
Color values
The performance of IE and firefox/safari/chrome have a little difference, the reason is unknown

Let Ie6/ie7/ie8 browser support CSS3 Properties

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.