关键词:
依赖源 该文件为 ie-css3.htc (特别提示.htc为二进制文件,只会在ie中识别,让IE浏览器支持CSS3的一些属性)
以下为依赖文件源码
通过源码我们可以看到 该文件在一定程度上类似于我们所使用的javascrip
--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>
示例代码:
俗话说的好书面描述的再好,都不如上手来段代码实践一波来的实际,当然该代码均为在本地环境下的实践,在低版本ie下的css3效果当然也不如符合W3C的正统css3展示的美观
毕竟不是浏览器自带的属性,使用时遇到问题在所难免,这里说一下一些注意事项,也可以说是方法的局限性吧:
- 当前元素一定要有定位属性,像是position:relative或是position:absolute属性。
- z-index值一定要比周围元素的要高,否则……只能说抱歉了~~
- http协议访问。
- 原生IE浏览器访问,兼容模式显示可能没效果。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>低版本ie-支持css3</title> <style> body { background: #fff; } .box { background: #f8f8f8; /* 通知IE浏览器调用脚本作用于‘box‘类 */ behavior: url(htc-css3.htc); /* 现代浏览器以及使用了IE-CSS3的IE浏览器 */ border-radius: 15px; /* 现代浏览器以及使用了IE-CSS3的IE浏览器 */ box-shadow: 2px 2px 8px #000; display: inline-block; padding: 10px; height: 60px; } </style> </head> <body> <div class="box"> 看到一本书里的一句话,大意是:“如果你满脑子都是一个人,你会发现你们之间有很多巧合,所有那些被你认为是心有灵犀的事件都只是你太刻意的关注罢了”。 <br> 有人说:“遇见爱,遇见性,都不算难,难得是遇见了解,爱可以是一见钟情,性只需要几分钟,而了解可能需要一辈子。” <br> 知道我看到一本书觉得在精神上无比的契合,我记得原话是“一段好的爱情,不是互相占有,而是共同成长。” </div> </body> </html>
通过源码我们可以清晰的看到这份htc文件所支持的css属性(如下表)【当然我们也可以自己通过对源码的拓展来创建自己需要的兼容css3的代码】
样式 | 生效 | 无效 |
---|---|---|
border-radius | 为元素四个角设置圆角属性 元素边框 |
只设置一个角落的圆角属性 |
box-shadow | 模糊大小参数 偏移值 |
不支持除了黑色(#000)以外的其他颜色 |
text-shadow | 模糊大小参数 偏移值 颜色值 |
IE下的表现与Firefox/Safari/Chrome有一点点的差异,原因不详 |
让ie6/ie7/ie8支持css3属性的8种方法介绍
我们都知道,IE浏览器暂不支持CSS3的一些属性。国外的工程师们,不安于此现状,他们总是尽量使用一些手段使IE浏览器也能支持CSS3属性,我觉得这些都是很有意义,很有价值的工作,可以推动整个技术领域的进步的。到目前为... 查看详情
让ie9以下版本的浏览支持html5,css3的插件
随着html5(后面用h5代表)标签越来越广泛的使用,IE不识别h5标签的问题让人很是烦恼。 在火狐和chrome之类的浏览器中,遇到不认识的标签,只要给个display:block属性,就能让这个元素成为一个类似div的元素,但是到IE上就... 查看详情
windows系统下主流浏览器(包括ie浏览器)对vue技术栈支持性调查
...开始前,我进行了调研工作。主流浏览器支持安装的最高版本号主流浏览器对Vue支持的最低版本号 Vue不支持IE8及以下版本,因为Vue使用了IE8无法模拟的ECMAScript5特性Object.defineProperty实现数据追踪,故不支持IE8及更低版... 查看详情
让ie8及以下浏览器支持表单input[placeholder]属性(代码片段)
在我们的日常开发中,时常会遇到要求兼容ie低版本的项目,其中表单多的项目,其中用到placeholder属性几乎是必不可少的。placeholder是一个很实用的Html5属性。但是该属性在低版本的IE下是无效的。于是在网上找了很多方法... 查看详情
让ie8一下兼容css3选择器
...ipt方案来使IE支持CSS3选择器。该脚本支持从IE5到IE8的各个版本。首先,您需要下载DOMAssistant脚本和ie-css3.js脚本并将他们包含进head标签中.====只要百度下ie-css3.js然后下载里面就有这两文件了哦解析:第一句是使IE8一些兼容HTML5标签... 查看详情
同时绑定onpropertychange和oninput事件,实时检测inputtextarea输入改变事件,支持低版本ie,支持复制粘贴
实时检测input、textarea输入改变事件,支持低版本IE,支持复制粘贴检测input、textarea输入改变事件有以下几种:1、onkeyup/onkeydown 捕获用户键盘输入事件。 缺陷:复制粘贴时无法检测2、onchenge 缺陷:要满足触发条件:... 查看详情
css3过渡
...一个状态可以让我们页面跟好看,更加动感十足,虽然低版本游览器不支持(ie9以下版本)但是不会影响到页面布局我们现在经常和:hover一起搭配使用使用的口诀:谁做过渡给谁家,谁需要变 查看详情
css3的过渡
...era支持transition属性 Safari需要前缀-webkit- IE9及之前版本不支持transition【用法】 1.指定过渡绑定的元素CSS属性 2.规定效果的时长div{transition: 查看详情
css3透明度与过度属性
...考技术Aopacity:x x值为0~1,值越小越透明,在ie低版本的不支持filter:alpha(opacity=x) x值为0~100,值越小越透明, ie低版本支持filter:alpha(opacity=x)background:rgba():也可以改变透明度,a的值为0~1,值为1时完全不透明transi... 查看详情
ie-css3.htc让ie6,7,and8也支持box-shadow
...佚名IE6/7并不支持CSS3的属性,IE8也不能很好的支持CSS3。如何让IE6/7/8支持border-radius(rounded),box-shadow(shadow),text-shadow等这些属性呢?这里介绍一个通过htc脚本实现这些属性的方法 首先下载ie-css3.htc脚本,然后在css中加入:它... 查看详情
flash设置(各种版本浏览器包括低版本ie)
涉及到的各种版本flash百度下都能下到的,不再说明。 Flash的安装比较麻烦,涉及多种浏览器、多种操作系统支持,安装、设置的地方比较多,以下说明基本涉及大部分安装过程中可能遇到的问题,如果安装或视频播放过程... 查看详情
loadrunner支持的ie版本
LoadRunner支持的IE版本:8.0最高ie68.1最高ie69.0最高ie79.5最高ie811.0最高ie9(win732位+LR11+IE10可用,但win764位+LR11+IE10不可用,降至IE9可用)12.0支持IE11有些情况下,考虑IE版本兼容问题,主要是由于:1、要测试的应用程序不支持低版本的IE... 查看详情
如何让firefox和chrome支持css自定义鼠标样式?ie中用“cursor:url()”属性可以实现,ff、chrome怎么弄?
我想要通用的解决方案最好是兼容所有浏览器的写法。如何让firefox和chrome支持css自定义鼠标样式?IE中用“cursor:url()”属性可以实现,FF、Chrome怎么弄?我想要通用的解决方案最好是兼容所有浏览器的写法。不要说FF不能实现,... 查看详情
ie8下面版本号(包含ie8)的浏览器不支持html5标签属性解决方式(modernizr2.6.2插件的使用)
我这边申明下:我写这篇日志主要是想然ie8可以支持html5的个别标签闭合,并不能让ie全然支持html5。我之前写的可能会误导非常多同学。希望大家能明确。今天脑抽想用html5标签设计一个网页。我本人用的是火狐浏览器,都弄好... 查看详情
ie8不支持的部分css3属性处理
IE8不支持的部分css3属性1.1 border-radius圆角border:1pxsolid#696;padding:60px0;text-align:center;width:200px;-webkit-border-radius:8px;-moz-border-radius:8px;border-radius:8px;background:#EEFF99;behavior:ur 查看详情
ie兼容性小结(ie7及以上版本)
缘由在急速的互联网时代,原本ie系列的低版本浏览器就该淘汰了。可偏偏还是有很多xp系统ie7、8浏览器,这有让网站甚是苦逼。练就了一套新技术,原本以为能大展身手,可却在ie阵容中认怂了,不得不规规矩矩的写着老得掉... 查看详情
在ie需要保留在版本9的情况下,怎么浏览只支持ie10以上的网页
因工作需要,笔记本电脑的IE要保留在版本9,但是这样,在上网查询资料是,经常会因为版本低而不能查看资料(您正在使用的浏览器版本过低,将不能正常浏览和使用百度知道请升级IE10版本以上,或更换浏览器。——底下提... 查看详情
让网页在ie浏览器下以最高版本解析网页
...ge">Edge模式告诉IE以最高级模式渲染文档,也就是任何IE版本都以当前版本所支持的最高级标准模式渲染,避免版本升级造成的影响。简单的说,就是什么版本IE就用 查看详情