IE下Css圆角问题

来源：互联网发布：网络直播视频编辑：程序博客网时间：2024/04/25 22:25

在网頁制作时，圆角的样式在很多时候都要到，大多数都是用图片来搞，其实图片不图片无所谓的，但也有的朋友比较喜欢用CSS来写，CSS写的话在火狐、谷歌等浏览器都是没有问题的。但是在IE下就会出现问题，圆角就没有了。这时候就要用到一个文件，当时那个文件是哪里下的已经记不清了，但用着还是挺不错的。由于不知道怎么上传文件，就只能把源码弄出来了。

test.html

<html><head><title>test</title><style type="text/css">.test {width:100px;height:100px;  background-color: blue;margin-bottom:10px;  border-radius: 10px;  behavior: url(ie-css3.htc);}</style></head><body><div class="test">test</div></body></html>

ie-css3.htc

--Do not remove this if you are using--Original Author: Remiz RahnasOriginal Author URL: http://www.htmlremix.comPublished date: 2008/09/24Changes 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 thingsPublished date : 2010/03/14http://fetchak.com/ie-css3Thanks 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; // Millisecondsborder_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-browserfunction 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.htmlfunction 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 resizingelement.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 elementisIE6 = /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 resizingelement.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 resizingelement.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 pageif (typeof(window.ieCSS3) == 'undefined') {// Create global ieCSS3 objectwindow.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 eventwindow.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.jsvml_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>

0 0