Give Way IE6/IE7/IE8 Browser support CSS3 attribute

by zhangxinxu from http://www.zhangxinxu.com
This paper addresses :http://www.zhangxinxu.com/wordpress/?p=783

One 、 download

You can click here :ie-css3.htc, This thing is to make IE Browser support CSS3 The key to performance .

Two 、 What's on it

First, .htc file ,.htc File is a script file , I personally think it's related to js The documents belong to the same category , Just , Looks like htc yes Internet Explorer(IE) The illegitimate son of , Only IE I didn't recognize it .htc Files can be used to describe web Behavior ,web Behavior allows programmers to put custom functions “ Connect ” To existing elements and controls , Instead of having to let users download binaries ( for example ActiveX Control ) To do that .Stop! Don't fork too far , nudges , If you are right about htc The document is interested in , You can see here .

This part of this article ie-css3.htc Look at the name of the file , Just look at what you look like , Give Way IE Browser support CSS3 Some properties of . you 're right , That's to say, script for IE The browser adds some CSS3 Some behaviors under the standard ( Some of the more popular ). this htc The first main script 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
}

People who understand basically know , It doesn't follow js The script comes out of a mold . in other words ,htc It's just js Script went to Korea for a whole look , It's just a new vest .

3、 ... and 、 How it works

How it works , There has to be a new character , That's it “VML”.VML yes The Vector Markup Language( Vector markup language ) Abbreviation .VML A markup language for vectoring graphic data . It's based on XML The language of grammar , from AutoDesk 、 Macromedia and Microsoft and HP Company to W3C The proposal .VML amount to IE The paintbrush inside , Can achieve the graphics you want , And combined with scripts , You can make graphics dynamic .VML Microsoft's 1999 year 9 Monthly collateral IE5.0 released …… About VML Details , You can click here :VML Encyclopedias

If you want me to say , I think it's IE The Royal brush of the browser , Dedicated to the IE For painting . So? IE bastard htc add IE Private brushes VML You can achieve some IE Proprietary graphics and presentation , It's just that we can achieve some IE Don't support CSS3 effect .

Four 、 How to use

It's easy to use , Look at the following example code :

.box {
-moz-border-radius: 15px; /* Firefox */
-webkit-border-radius: 15px; /* Safari and Chrome */
border-radius: 15px; /* Opera 10.5+, And the use of IE-CSS3 Of 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 the use of IE-CSS3 Of IE browser */ behavior: url(ie-css3.htc); /* notice IE The browser call script acts on 'box' class */
}

You can see , In addition to the addition of behavior Such a sentence ,CSS3 The attribute is still that CSS3 attribute , No makeup 、 Embellish or incarnate as transformers , This is also the advantage of this method .

5、 ... and 、 Questions and necessary explanations

After all, it's not the browser's own property , It is inevitable to encounter problems in use , Here are some considerations , It can also be said that it is the limitation of the method :

  1. The current element must have positioning attributes , Like position:relative or position:absolute attribute .
  2. z-index The value must be higher than that of the surrounding elements , otherwise …… I can only say sorry ~~

6、 ... and 、 Supported styles and status descriptions

See the table below :

style take effect Invalid
border-radius Set the fillet properties for the four corners of the element
Element border
Set the fillet property of only one corner
box-shadow Blur size parameter
Offset value
Not supported except black (#000) Other colors besides
text-shadow Blur size parameter
Offset value
Color value
IE The performance and Firefox/Safari/Chrome There's a little difference , Cause unknown

ie Support CSS3 More about tags

  1. HTML-HTML5+CSS3 Authoritative guide to reading ( Two 、 Give Way IE Support HTML5 Labels and pairs CSS3 Media Query Compatibility )

    Compatible solution HTML5 It's in the lower version of the browser (IE8-) Compatibility is limited , It's like a lot of structural things sign <header>.<section>.<footer> Wait in IE8 The following will not be recognized ...

  2. Respond.js – Give Way IE6-8 Support CSS3 Media Query

    Respond.js It's a fast one . A lightweight polyfill, Used to IE6-8 And others don't support  CSS3 Media Queries Browser provides media query  min-width and max-width ...

  3. css3 Part of the attribute compatibility is awkward ( I called him awkward because of many things , I hope to give full and early support css3 Well )

    /* Round corners class, The elements that need to be rounded add class name */ .roundedCorners{ -webkit-border-radius: 10px;/*webkit Kernel browser */ -moz-bor ...

  4. Selectivizr- Give Way IE6~8 Support CSS3 Pseudo classes and property selectors

    One . To download and demo download : You can click here :selectivizr-1.0.0.zip( Right click -[ The goal is | Save Link as ] 9.24K) demo: You can click here :Selectivizr Some properties ...

  5. Give Way IE6/IE7/IE8 Support HTML5 Labeled js Code

    Give Way IE(ie6/ie7/ie8) Support HTML5 Elements , We need to be in HTML Add the following to the head JavaScript, This is an easy one document.createElement Statement , Use conditional annotations for IE To call this j ...

  6. Let not support h5 Browsers with new tags support new tags

    Put this paragraph js Just add it to the head of the page , Create tags that you want your browser to support // Conditional judgment supports h5 if(window.applicationCache){ alert(" Support h5") } ...

  7. Give Way IE6/IE7/IE8 Browser support CSS3 attribute

    Give Way IE6/IE7/IE8 Browser support CSS3 attribute One . download You can click here :ie-css3.htc, This thing is to make IE Browser support CSS3 The key to performance . Two . What's on it First, .htc file ...

  8. IE10 Start supporting CSS3 Transitions, Transforms and Animations

    This is good news , Microsoft says publicly IE10 The preview version already supports CSS3 attribute Transitions, Transforms and Animations, You can write directly transitions, Instead of adding a disgusting prefix -ms ...

  9. php Built in supported tags and properties

    The list of tags and attributes that are built-in support is as follows : Tag name effect Include properties include Contains external template files ( closed ) file import Import resource file ( closed Include js css load Alias ) file,href,ty ...

Random recommendation

  1. Permutations

    Permutations Given a collection of distinct numbers, return all possible permutations. For example,[ ...

  2. SICP Practice notes

    ------------- Find the square root of a number ( Newton's square root solution ): (define (sqrt-iter guess x) (if (good-enough? guess x) guess (sqrt ...

  3. DataSnap Modifying data ApplyUpdates There is an error : Busy connection causes another command

    I'm going to try to use DBExpress Do a SQL Serer application , I found a problem in my study DBExpress Connect Sql server 2008 express Use the following controls SQLConnection-&g ...

  4. About KVC、KVO

    KVC/KVO --------------------KVC-- Key code ------------------- effect : Use string to describe the properties of the object, and modify the properties of the object indirectly Student *stu=[[Stu ...

  5. 53. Minimum Window Substring

    Minimum Window Substring Given a string S and a string T, find the minimum window in S which will co ...

  6. python Get folder size

    __author__ = 'bruce' import os from os.path import join,getsize def getdirsize(dir): size=0l for (ro ...

  7. HDUOJ-----(1162)Eddy&#39;s picture( Minimum spanning tree )

    Eddy's picture Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)To ...

  8. Linux install VritualBox Implementing virtual machines win2003 Port mapping Supports remote

    1. Use VNC Log in to Linux System 2. install VritualBox find VritualBox Software package Here is run Format It can run directly on the terminal   It will take a few minutes 3.VritualBox New virtual machine ...

  9. Python Core programming reading pen 13: execution environment

    The first 14 Chapter   execution environment One . Callable object python There are four types of callable objects : function . Method . class . Some examples of classes 1 function (1) Built-in functions (BIF) BIF Yes, it is c/c++ Written , Compile and put in python Interpreter , And then put them ...

  10. JavaScript Realize simple access to local data and Json Data access

    1. Determine if local storage is available : if(window.localStorage) { // localStorge You can use }else { // localStorge Unavailable } 2. Store the data : // Access to the local ...