IE圓角兼容方法

使用方法

如何在IE9以下版本的瀏覽器支持圓角的特性

.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瀏覽器調(diào)用腳本作用于'box'類 */
}

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.arcsize = element.arcSize / (element.offsetWidth + rect.size_offset.width);
    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');
    //add by emptyhua@gmail.com
    if (this.fillSrc == 'none')
        this.fillSrc = 'javascript:void(0);';
    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(); }
}

// added by emptyhua@gmail.com 2010 7-3
window.update_css3_fix_position = updatePositionAndSize;
window.update_css3_fix = function(el)
{
    if (!el.vml) return;
    el.arcSize = Math.min(el.borderRadius / Math.min(el.offsetWidth, el.offsetHeight), 1);

    // Find which element provides position:relative for the target element (default to BODY)
    var vml_parent = el;
    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);
    el.pos_ieCSS3 = findPos(el);

    for (i in el.vml) 
    {
        element.parentNode.removeChild(el.vml[i]);
    }
    el.vml = [];
    var rv1 = createBoxShadow(el, vml_parent);
    var rv2 = createBorderRect(el, vml_parent);
};
</script>


?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末佃乘,一起剝皮案震驚了整個濱河市暖璧,隨后出現(xiàn)的幾起案子开睡,更是在濱河造成了極大的恐慌恼除,老刑警劉巖庭砍,帶你破解...
    沈念sama閱讀 218,204評論 6 506
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件构拳,死亡現(xiàn)場離奇詭異抗俄,居然都是意外死亡裹刮,警方通過查閱死者的電腦和手機盏混,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,091評論 3 395
  • 文/潘曉璐 我一進店門蔚鸥,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人许赃,你說我怎么就攤上這事止喷。” “怎么了混聊?”我有些...
    開封第一講書人閱讀 164,548評論 0 354
  • 文/不壞的土叔 我叫張陵弹谁,是天一觀的道長。 經(jīng)常有香客問我句喜,道長预愤,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,657評論 1 293
  • 正文 為了忘掉前任咳胃,我火速辦了婚禮植康,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘展懈。我一直安慰自己销睁,他們只是感情好供璧,可當(dāng)我...
    茶點故事閱讀 67,689評論 6 392
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著冻记,像睡著了一般睡毒。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上檩赢,一...
    開封第一講書人閱讀 51,554評論 1 305
  • 那天吕嘀,我揣著相機與錄音,去河邊找鬼贞瞒。 笑死偶房,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的军浆。 我是一名探鬼主播棕洋,決...
    沈念sama閱讀 40,302評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼乒融!你這毒婦竟也來了掰盘?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,216評論 0 276
  • 序言:老撾萬榮一對情侶失蹤赞季,失蹤者是張志新(化名)和其女友劉穎愧捕,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體申钩,經(jīng)...
    沈念sama閱讀 45,661評論 1 314
  • 正文 獨居荒郊野嶺守林人離奇死亡次绘,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,851評論 3 336
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了撒遣。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片邮偎。...
    茶點故事閱讀 39,977評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖义黎,靈堂內(nèi)的尸體忽然破棺而出禾进,到底是詐尸還是另有隱情,我是刑警寧澤廉涕,帶...
    沈念sama閱讀 35,697評論 5 347
  • 正文 年R本政府宣布泻云,位于F島的核電站,受9級特大地震影響火的,放射性物質(zhì)發(fā)生泄漏壶愤。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 41,306評論 3 330
  • 文/蒙蒙 一馏鹤、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧娇哆,春花似錦湃累、人聲如沸勃救。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,898評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽蒙秒。三九已至,卻和暖如春宵统,著一層夾襖步出監(jiān)牢的瞬間晕讲,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,019評論 1 270
  • 我被黑心中介騙來泰國打工马澈, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留瓢省,地道東北人。 一個月前我還...
    沈念sama閱讀 48,138評論 3 370
  • 正文 我出身青樓痊班,卻偏偏與公主長得像勤婚,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子涤伐,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 44,927評論 2 355

推薦閱讀更多精彩內(nèi)容

  • ??JavaScript 與 HTML 之間的交互是通過事件實現(xiàn)的凝果。 ??事件祝迂,就是文檔或瀏覽器窗口中發(fā)生的一些特...
    霜天曉閱讀 3,490評論 1 11
  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標(biāo)簽?zāi)J的外補...
    _Yfling閱讀 13,754評論 1 92
  • 1.瀏覽器兼容問題 瀏覽器與前端技術(shù)的發(fā)展不匹配 不同瀏覽器參考的標(biāo)準(zhǔn)器净、實現(xiàn)的方式不同 2.相關(guān)參考資料 瀏覽器市...
    IT男的成長記錄閱讀 496評論 0 6
  • 昨天第一次做time log型雳,就是把一天當(dāng)中發(fā)生的事情,還有它的起止時間都記錄下來掌动。目的是追溯一下這一整天四啰,從開始...
    張莞爾閱讀 536評論 0 0
  • 文/趙元波 在美國佛蒙特州的一個農(nóng)場里,農(nóng)場的主人弗洛伊德·德克斯特主要養(yǎng)奶牛粗恢。像所有農(nóng)場主一樣柑晒,為了在冬天下雪時...
    趙元波閱讀 179評論 0 0