IE의 둥근 모서리

Question

이 데모는 IE6, IE7 및 IE8에서만 작동합니다.

http://www.impressivewebs.com/css3-rounded-corners-in-internet-explorer/

는 어떤 기술이 사용되고있다?

Answer 1

그들은 IE의 특정 스타일 시트를로드 할 IE 조건부 주석을 사용하고 있습니다 :

이 스타일 시트의 스타일, 즉 데모 페이지에 .border-radius div에 적용되는 behaviour (회색 하나를 정의

<!--[if gte IE 6.]> 
    <link rel="stylesheet" href="http://www.impressivewebs.com/wp-content/themes/iw_2009/ie-stuff.css" type="text/css" media="screen" /> 
<![endif]--> 

, 굽은 모서리와 함께). ,

--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 
Published date : 2009/11/18 


<public:attach event="oncontentready" onevent="oncontentready('v08vnSVo78t4JfjH')" /> 
<script type="text/javascript"> 

// 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 oncontentready(classID) { 
    if (this.className.match(classID)) { return(false); } 

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

    this.className = this.className.concat(' ', classID); 
    var arcSize = Math.min(parseInt(this.currentStyle['-moz-border-radius'] || 
            this.currentStyle['-webkit-border-radius'] || 
            this.currentStyle['border-radius'] || 
            this.currentStyle['-khtml-border-radius'])/
          Math.min(this.offsetWidth, this.offsetHeight), 1); 
    var fillColor = this.currentStyle.backgroundColor; 
    var fillSrc = this.currentStyle.backgroundImage.replace(/^url\("(.+)"\)$/, '$1'); 
    var strokeColor = this.currentStyle.borderColor; 
    var strokeWeight = parseInt(this.currentStyle.borderWidth); 
    var stroked = 'true'; 
    if (isNaN(strokeWeight)) { 
     strokeWeight = 0; 
     strokeColor = fillColor; 
     stroked = 'false'; 
    } 

    this.style.background = 'transparent'; 
    this.style.borderColor = 'transparent'; 

    // Find which element provides position:relative for the target element (default to BODY) 
    var el = this; 
    var limit = 100, i = 0; 
    while ((typeof(el) != 'unknown') && (el.currentStyle.position != 'relative') && (el.tagName != 'BODY')) { 
     el = el.parentElement; 
     i++; 
     if (i >= limit) { return(false); } 
    } 
    var el_zindex = parseInt(el.currentStyle.zIndex); 
    if (isNaN(el_zindex)) { el_zindex = 0; } 
    //alert('got tag '+ el.tagName +' with pos '+ el.currentStyle.position); 

    var rect_size = { 
     'width': this.offsetWidth - strokeWeight, 
     'height': this.offsetHeight - strokeWeight 
    }; 
    var el_pos = findPos(el); 
    var this_pos = findPos(this); 
    this_pos.y = this_pos.y + (0.5 * strokeWeight) - el_pos.y; 
    this_pos.x = this_pos.x + (0.5 * strokeWeight) - el_pos.x; 

    var rect = document.createElement('v:roundrect'); 
    rect.arcsize = arcSize +'px'; 
    rect.strokecolor = strokeColor; 
    rect.strokeWeight = strokeWeight +'px'; 
    rect.stroked = stroked; 
    rect.style.display = 'block'; 
    rect.style.position = 'absolute'; 
    rect.style.top = this_pos.y +'px'; 
    rect.style.left = this_pos.x +'px'; 
    rect.style.width = rect_size.width +'px'; 
    rect.style.height = rect_size.height +'px'; 
    rect.style.antialias = true; 
    //rect.style.zIndex = el_zindex - 1; 

    var fill = document.createElement('v:fill'); 
    fill.color = fillColor; 
    fill.src = fillSrc; 
    fill.type = 'tile'; 

    rect.appendChild(fill); 
    el.appendChild(rect); 

    var css = el.document.createStyleSheet(); 
    css.addRule("v\\:roundrect", "behavior: url(#default#VML)"); 
    css.addRule("v\\:fill", "behavior: url(#default#VML)"); 

    isIE6 = /msie|MSIE 6/.test(navigator.userAgent); 
    // IE6 doesn't support transparent borders, use padding to offset original element 
    if (isIE6 && (strokeWeight > 0)) { 
     this.style.borderStyle = 'none'; 
     this.style.paddingTop = parseInt(this.currentStyle.paddingTop || 0) + strokeWeight; 
     this.style.paddingBottom = parseInt(this.currentStyle.paddingBottom || 0) + strokeWeight; 
    } 

    if (typeof(window.rounded_elements) == 'undefined') { 
     window.rounded_elements = new Array(); 

     if (typeof(window.onresize) == 'function') { window.previous_onresize = window.onresize; } 
     window.onresize = window_resize; 
    } 
    this.element.vml = rect; 
    window.rounded_elements.push(this.element); 
} 

function window_resize() { 
    if (typeof(window.rounded_elements) == 'undefined') { return(false); } 

    for (var i in window.rounded_elements) { 
     var el = window.rounded_elements[i]; 

     var strokeWeight = parseInt(el.currentStyle.borderWidth); 
     if (isNaN(strokeWeight)) { strokeWeight = 0; } 

     var parent_pos = findPos(el.vml.parentNode); 
     var pos = findPos(el); 
     pos.y = pos.y + (0.5 * strokeWeight) - parent_pos.y; 
     pos.x = pos.x + (0.5 * strokeWeight) - parent_pos.x; 

     el.vml.style.top = pos.y +'px'; 
     el.vml.style.left = pos.x +'px'; 
    } 

    if (typeof(window.previous_onresize) == 'function') { window.previous_onresize(); } 
} 
</script> 

그것은 흥미로운 발견이었다

.box-radius { 
behavior: url(/border-radius.htc); 
} 

을 그리고 다음 .htc (Wikipedia article link) 파일이 URL 링크 (MS IE를위한 DHTML JS/VBScript를 스타일의 스크립팅 언어의 일종) : 스타일 시트 정의 나는 잠시 동안 .htc 파일을 사용하는 것을 보지 못했다.