让IE6/IE7/IE8支持CSS3属性实例页面

一、下载

您可以狠狠地点击这里：ie-css3.htc，这个玩意儿是让IE浏览器支持CSS3表现的关键东东。

示例：http://www.zhangxinxu.com/study/201210/css3-animate-pop-flow-example.html

 

二、上面的是什么东西

首先说说.htc文件，.htc文件是个脚本文件，我个人以为与js文件属于同一货色，只是呢，貌似htc是Internet Explorer(IE)的私生子，只有IE才认它。htc文件可以用来描述web行为，web行为允许程序员把自定义的功能“连接”到现有的元素和控件，而不是必须让用户下载二进制文件（例如ActiveX 控件）来完成这个功能。Stop! 别叉远了，点到为止，如果您对htc文件感兴趣，可以参见这里。

本文的这个ie-css3.htc文件看看名字，看看长相就知道是干嘛的了，让IE浏览器支持CSS3的一些属性。没错，就是通过脚本为IE浏览器增加一些CSS3标准下的一些行为（比较流行的几种）。此htc第一段主要脚本如下：

 

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

}

 

明白人基本上都知道，这不跟js脚本一个模子里出来的嘛。也就是说，htc只是js脚本去韩国整了个容，换了副马甲而已。

三、如何工作的

要说工作原理，得有一个新角色粉墨登场，那就是“VML”。VML是The Vector Markup Language(矢量可标记语言)的缩写。VML用于将图形数据矢量化的标记语言。这是一种基于 XML 语法的语言，由 AutoDesk 、 Macromedia 和 Microsoft 和 HP 公司向 W3C 提出的方案。VML相当于IE里面的画笔，能实现你所想要的图形，而且结合脚本，可以让图形产生动态的效果。VML是微软1999年9月附带IE5.0发布的……关于VML详细知识，您可以点击这里：VML百科

如果要我说的话，我觉得就是IE浏览器的御用画笔，专门给IE作画用的。于是呢IE私生子htc加上IE私有画笔VML就可以实现一些IE专有的图形与表现了，正好可以就此实现一些IE不支持的CSS3效果。

四、如何使用

使用是很容易的，看下面的示例代码：

 

.box {

  -moz-border-radius: 15px; /* Firefox */

  -webkit-border-radius: 15px; /* Safari 和 Chrome */

  border-radius: 15px; /* Opera 10.5+, 以及使用了IE-CSS3的IE浏览器 */



  -moz-box-shadow: 10px 10px 20px #000; /* Firefox */

  -webkit-box-shadow: 10px 10px 20px #000; /* Safari 和 Chrome */

  box-shadow: 10px 10px 20px #000; /* Opera 10.5+, 以及使用了IE-CSS3的IE浏览器 */



  behavior: url(ie-css3.htc); /* 通知IE浏览器调用脚本作用于'box'类 */

}

 

可以看到，除了最后添加了behavior这么一句，CSS3属性还是那个CSS3属性，不需要化妆、修饰或是化身为变形金刚，这也是此方法的优点所在。

五、问题和必要的说明

毕竟不是浏览器自带的属性，使用时遇到问题在所难免，这里说一下一些注意事项，也可以说是方法的局限性吧：

1. 当前元素一定要有定位属性，像是position:relative或是position:absolute属性。

2. z-index值一定要比周围元素的要高，否则……只能说抱歉了~~

六、支持的样式及状态说明

参见下表：

样式生效无效border-radius为元素四个角设置圆角属性
元素边框只设置一个角落的圆角属性box-shadow模糊大小参数
偏移值不支持除了黑色(#000)以外的其他颜色text-shadow模糊大小参数
偏移值
颜色值IE下的表现与Firefox/Safari/Chrome有一点点的差异，原因不详

七、实例与演示

我自己做了个demo页面，实现的效果是CSS3的圆角以及投影效果，您可以狠狠地点击这里：IE支持CSS3 demo

以下为IE6浏览器下的效果截图：

八、结语

此htc文件是老外写的，所以要是遇到不知名的问题，可以向我询问，但是我不能保证可以给出一个满意的答复。就这些，祝您好运。

ie-css3.htc的全部代码：

--Do not remove this if you are using--

Original Author: Remiz Rahnas

Original Author URL: http://www.htmlremix.com

Published date: 2008/09/24

   

Changes by Nick Fetchak:

- IE8 standards mode compatibility

- VML elements now positioned behind original box rather than inside of it - should be less prone to breakage

- Added partial support for 'box-shadow' style

- Checks for VML support before doing anything

- Updates VML element size and position via timer and also via window resize event

- lots of other small things

Published date : 2010/03/14

http://fetchak.com/ie-css3

   

Thanks to TheBrightLines.com (http://www.thebrightlines.com/2009/12/03/using-ies-filter-in-a-cross-browser-way) for enlightening me about the DropShadow filter

   

<public:attach event="ondocumentready" onevent="ondocumentready('v08vnSVo78t4JfjH')" />

<script type="text/javascript">

   

timer_length = 200; // Milliseconds

border_opacity = false; // Use opacity on borders of rounded-corner elements? Note: This causes antialiasing issues

   

   

// supportsVml() borrowed from http://stackoverflow.com/questions/654112/how-do-you-detect-support-for-vml-or-svg-in-a-browser

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

}

   

   

// findPos() borrowed from http://www.quirksmode.org/js/findpos.html

function findPos(obj) {

    var curleft = curtop = 0;

   

    if (obj.offsetParent) {

        do {

            curleft += obj.offsetLeft;

            curtop += obj.offsetTop;

        } while (obj = obj.offsetParent);

    }

   

    return({

        'x': curleft,

        'y': curtop

    });

}

   

function createBoxShadow(element, vml_parent) {

    var style = element.currentStyle['iecss3-box-shadow'] || element.currentStyle['-moz-box-shadow'] || element.currentStyle['-webkit-box-shadow'] || element.currentStyle['box-shadow'] || '';

    var match = style.match(/^(\d+)px (\d+)px (\d+)px/);

    if (!match) { return(false); }

   

   

    var shadow = document.createElement('v:roundrect');

    shadow.userAttrs = {

        'x': parseInt(RegExp.$1 || 0),

        'y': parseInt(RegExp.$2 || 0),

        'radius': parseInt(RegExp.$3 || 0) / 2

    };

    shadow.position_offset = {

        'y': (0 - vml_parent.pos_ieCSS3.y - shadow.userAttrs.radius + shadow.userAttrs.y),

        'x': (0 - vml_parent.pos_ieCSS3.x - shadow.userAttrs.radius + shadow.userAttrs.x)

    };

    shadow.size_offset = {

        'width': 0,

        'height': 0

    };

    shadow.arcsize = element.arcSize +'px';

    shadow.style.display = 'block';

    shadow.style.position = 'absolute';

    shadow.style.top = (element.pos_ieCSS3.y + shadow.position_offset.y) +'px';

    shadow.style.left = (element.pos_ieCSS3.x + shadow.position_offset.x) +'px';

    shadow.style.width = element.offsetWidth +'px';

    shadow.style.height = element.offsetHeight +'px';

    shadow.style.antialias = true;

    shadow.className = 'vml_box_shadow';

    shadow.style.zIndex = element.zIndex - 1;

    shadow.style.filter = 'progid:DXImageTransform.Microsoft.Blur(pixelRadius='+ shadow.userAttrs.radius +',makeShadow=true,shadowOpacity='+ element.opacity +')';

   

    element.parentNode.appendChild(shadow);

    //element.parentNode.insertBefore(shadow, element.element);

   

    // For window resizing

    element.vml.push(shadow);

   

    return(true);

}

   

function createBorderRect(element, vml_parent) {

    if (isNaN(element.borderRadius)) { return(false); }

   

    element.style.background = 'transparent';

    element.style.borderColor = 'transparent';

   

    var rect = document.createElement('v:roundrect');

    rect.position_offset = {

        'y': (0.5 * element.strokeWeight) - vml_parent.pos_ieCSS3.y,

        'x': (0.5 * element.strokeWeight) - vml_parent.pos_ieCSS3.x

    };

    rect.size_offset = {

        'width': 0 - element.strokeWeight,

        'height': 0 - element.strokeWeight

    };

    rect.arcsize = element.arcSize +'px';

    rect.strokeColor = element.strokeColor;

    rect.strokeWeight = element.strokeWeight +'px';

    rect.stroked = element.stroked;

    rect.className = 'vml_border_radius';

    rect.style.display = 'block';

    rect.style.position = 'absolute';

    rect.style.top = (element.pos_ieCSS3.y + rect.position_offset.y) +'px';

    rect.style.left = (element.pos_ieCSS3.x + rect.position_offset.x) +'px';

    rect.style.width = (element.offsetWidth + rect.size_offset.width) +'px';

    rect.style.height = (element.offsetHeight + rect.size_offset.height) +'px';

    rect.style.antialias = true;

    rect.style.zIndex = element.zIndex - 1;

   

    if (border_opacity && (element.opacity < 1)) {

        rect.style.filter = 'progid:DXImageTransform.Microsoft.Alpha(Opacity='+ parseFloat(element.opacity * 100) +')';

    }

   

    var fill = document.createElement('v:fill');

    fill.color = element.fillColor;

    fill.src = element.fillSrc;

    fill.className = 'vml_border_radius_fill';

    fill.type = 'tile';

    fill.opacity = element.opacity;

   

    // Hack: IE6 doesn't support transparent borders, use padding to offset original element

    isIE6 = /msie|MSIE 6/.test(navigator.userAgent);

    if (isIE6 && (element.strokeWeight > 0)) {

        element.style.borderStyle = 'none';

        element.style.paddingTop = parseInt(element.currentStyle.paddingTop || 0) + element.strokeWeight;

        element.style.paddingBottom = parseInt(element.currentStyle.paddingBottom || 0) + element.strokeWeight;

    }

   

    rect.appendChild(fill);

    element.parentNode.appendChild(rect);

    //element.parentNode.insertBefore(rect, element.element);

   

    // For window resizing

    element.vml.push(rect);

   

    return(true);

}

   

function createTextShadow(element, vml_parent) {

    if (!element.textShadow) { return(false); }

   

    var match = element.textShadow.match(/^(\d+)px (\d+)px (\d+)px (#?\w+)/);

    if (!match) { return(false); }

   

   

    //var shadow = document.createElement('span');

    var shadow = element.cloneNode(true);

    var radius = parseInt(RegExp.$3 || 0);

    shadow.userAttrs = {

        'x': parseInt(RegExp.$1 || 0) - (radius),

        'y': parseInt(RegExp.$2 || 0) - (radius),

        'radius': radius / 2,

        'color': (RegExp.$4 || '#000')

    };

    shadow.position_offset = {

        'y': (0 - vml_parent.pos_ieCSS3.y + shadow.userAttrs.y),

        'x': (0 - vml_parent.pos_ieCSS3.x + shadow.userAttrs.x)

    };

    shadow.size_offset = {

        'width': 0,

        'height': 0

    };

    shadow.style.color = shadow.userAttrs.color;

    shadow.style.position = 'absolute';

    shadow.style.top = (element.pos_ieCSS3.y + shadow.position_offset.y) +'px';

    shadow.style.left = (element.pos_ieCSS3.x + shadow.position_offset.x) +'px';

    shadow.style.antialias = true;

    shadow.style.behavior = null;

    shadow.className = 'ieCSS3_text_shadow';

    shadow.innerHTML = element.innerHTML;

    // For some reason it only looks right with opacity at 75%

    shadow.style.filter = '\

        progid:DXImageTransform.Microsoft.Alpha(Opacity=75)\

        progid:DXImageTransform.Microsoft.Blur(pixelRadius='+ shadow.userAttrs.radius +',makeShadow=false,shadowOpacity=100)\

    ';

   

    var clone = element.cloneNode(true);

    clone.position_offset = {

        'y': (0 - vml_parent.pos_ieCSS3.y),

        'x': (0 - vml_parent.pos_ieCSS3.x)

    };

    clone.size_offset = {

        'width': 0,

        'height': 0

    };

    clone.style.behavior = null;

    clone.style.position = 'absolute';

    clone.style.top = (element.pos_ieCSS3.y + clone.position_offset.y) +'px';

    clone.style.left = (element.pos_ieCSS3.x + clone.position_offset.x) +'px';

    clone.className = 'ieCSS3_text_shadow';

   

   

    element.parentNode.appendChild(shadow);

    element.parentNode.appendChild(clone);

   

    element.style.visibility = 'hidden';

   

    // For window resizing

    element.vml.push(clone);

    element.vml.push(shadow);

   

    return(true);

}

   

function ondocumentready(classID) {

    if (!supportsVml()) { return(false); }

   

  if (this.className.match(classID)) { return(false); }

    this.className = this.className.concat(' ', classID);

   

    // Add a namespace for VML (IE8 requires it)

    if (!document.namespaces.v) { document.namespaces.add("v", "urn:schemas-microsoft-com:vml"); }

   

    // Check to see if we've run once before on this page

    if (typeof(window.ieCSS3) == 'undefined') {

        // Create global ieCSS3 object

        window.ieCSS3 = {

            'vmlified_elements': new Array(),

            'update_timer': setInterval(updatePositionAndSize, timer_length)

        };

   

        if (typeof(window.onresize) == 'function') { window.ieCSS3.previous_onresize = window.onresize; }

   

        // Attach window resize event

        window.onresize = updatePositionAndSize;

    }

   

   

    // These attrs are for the script and have no meaning to the browser:

    this.borderRadius = parseInt(this.currentStyle['iecss3-border-radius'] ||

                                 this.currentStyle['-moz-border-radius'] ||

                                 this.currentStyle['-webkit-border-radius'] ||

                                 this.currentStyle['border-radius'] ||

                                 this.currentStyle['-khtml-border-radius']);

    this.arcSize = Math.min(this.borderRadius / Math.min(this.offsetWidth, this.offsetHeight), 1);

    this.fillColor = this.currentStyle.backgroundColor;

    this.fillSrc = this.currentStyle.backgroundImage.replace(/^url\("(.+)"\)$/, '$1');

    this.strokeColor = this.currentStyle.borderColor;

    this.strokeWeight = parseInt(this.currentStyle.borderWidth);

    this.stroked = 'true';

    if (isNaN(this.strokeWeight) || (this.strokeWeight == 0)) {

        this.strokeWeight = 0;

        this.strokeColor = fillColor;

        this.stroked = 'false';

    }

    this.opacity = parseFloat(this.currentStyle.opacity || 1);

    this.textShadow = this.currentStyle['text-shadow'];

   

    this.element.vml = new Array();

    this.zIndex = parseInt(this.currentStyle.zIndex);

    if (isNaN(this.zIndex)) { this.zIndex = 0; }

   

    // Find which element provides position:relative for the target element (default to BODY)

    vml_parent = this;

    var limit = 100, i = 0;

    do {

        vml_parent = vml_parent.parentElement;

        i++;

        if (i >= limit) { return(false); }

    } while ((typeof(vml_parent) != 'undefined') && (vml_parent.currentStyle.position != 'relative') && (vml_parent.tagName != 'BODY'));

   

    vml_parent.pos_ieCSS3 = findPos(vml_parent);

    this.pos_ieCSS3 = findPos(this);

   

    var rv1 = createBoxShadow(this, vml_parent);

    var rv2 = createBorderRect(this, vml_parent);

    var rv3 = createTextShadow(this, vml_parent);

    if (rv1 || rv2 || rv3) { window.ieCSS3.vmlified_elements.push(this.element); }

   

    if (typeof(vml_parent.document.ieCSS3_stylesheet) == 'undefined') {

        vml_parent.document.ieCSS3_stylesheet = vml_parent.document.createStyleSheet();

        vml_parent.document.ieCSS3_stylesheet.addRule("v\\:roundrect", "behavior: url(#default#VML)");

        vml_parent.document.ieCSS3_stylesheet.addRule("v\\:fill", "behavior: url(#default#VML)");

        // Compatibility with IE7.js

        vml_parent.document.ieCSS3_stylesheet.ie7 = true;

    }

}

   

function updatePositionAndSize() {

    if (typeof(window.ieCSS3.vmlified_elements) != 'object') { return(false); }

   

    for (var i in window.ieCSS3.vmlified_elements) {

        var el = window.ieCSS3.vmlified_elements[i];

   

        if (typeof(el.vml) != 'object') { continue; }

   

        for (var z in el.vml) {

            //var parent_pos = findPos(el.vml[z].parentNode);

            var new_pos = findPos(el);

            new_pos.x = (new_pos.x + el.vml[z].position_offset.x) + 'px';

            new_pos.y = (new_pos.y + el.vml[z].position_offset.y) + 'px';

            if (el.vml[z].style.left != new_pos.x) { el.vml[z].style.left = new_pos.x; }

            if (el.vml[z].style.top != new_pos.y) { el.vml[z].style.top = new_pos.y; }

   

            var new_size = {

                'width': parseInt(el.offsetWidth + el.vml[z].size_offset.width),

                'height': parseInt(el.offsetHeight + el.vml[z].size_offset.height)

            }

            if (el.vml[z].offsetWidth != new_size.width) { el.vml[z].style.width = new_size.width +'px'; }

            if (el.vml[z].offsetHeight != new_size.height) { el.vml[z].style.height = new_size.height +'px'; }

        }

    }

   

    if (event && (event.type == 'resize') && typeof(window.ieCSS3.previous_onresize) == 'function') { window.ieCSS3.previous_onresize(); }

}

</script>

 

来源：http://www.zhangxinxu.com/wordpress/?p=783

 

示例：

CSS代码：

.box{width:256px;

  height:190px;

  text-indent:2em;

  font-size:2em;

  font-family:'华文新魏','华文行楷','微软雅黑';

  color:#a6813c;

  background:url(http://image.zhangxinxu.com/image/study/s/s256/mm1.jpg) no-repeat;position:relative;

  z-index:2;

  

  -moz-border-radius:15px; /* Firefox */-webkit-border-radius:15px; /* Safari 和 Chrome */border-radius:15px; /* Opera 10.5+, 以及使用了IE-CSS3的IE浏览器 */-moz-box-shadow:10px10px20px#000; /* Firefox */-webkit-box-shadow:10px10px20px#000; /* Safari 和 Chrome */box-shadow:10px10px20px#000; /* Opera 10.5+, 以及使用了IE-CSS3的IE浏览器 */behavior: url(ie-css3.htc); /* 通知IE浏览器调用脚本作用于'box'类 */}

HTML代码：

<divclass="box">张含韵小妹妹</div>