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:
The current element must have a positional property, such as a position:relative or Position:absolute attribute.
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