~~圆角是比较常用的css3属性,但是ie6-8并不支持圆角,可用border-radius.htc  html组件实现圆角, border-radius.htc内部应用vml进行了重绘

border-radius.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
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>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
.d1{-webkit-border-radius:5px; border:3px solid #f00; -moz-border-radius:5px; width:300px; height:300px; background:#aaa; border-radius:5px; behavior:url(htc/border-radius.htc);} //注意htc文件的相对路径是 相对html文件的
</style>
</head> <body>
<div class="d1" id="d1"></div>
</body>
</html>

border-radius.htc为ie6-8实现圆角的更多相关文章

  1. 使IE6同样支持圆角效果

    之前写到过,IE6不支持:hover效果的解决办法,其它这个跟它一样.IE6(7/8)不支持border-radius属性,所以其中的圆角效果显示不出来,可以通过引用ie-css3.htc的方法解决. ...

  2. CSS魔法堂:重拾Border之——不仅仅是圆角

    前言  当CSS3推出border-radius属性时我们是那么欣喜若狂啊,一想到终于不用再添加额外元素来模拟圆角了,但发现border-radius还分水平半径和垂直半径,然后又发现border-t ...

  3. WPF 采用Border创建圆角

    通过设置可以创建圆角border的CornerRadius属性其边框呈现圆角样式 代码: <Border Height="50" Background="Red&q ...

  4. ie6兼容问题汇总

    这几天在查找和解决网页在ie6下的兼容性问题花了我不少的时间,参考了网上的一些解决方法和自己做出来比较有效果的给大家参考一下,也方便我日后再用到: 1.IE的cache设置为Every visit t ...

  5. IE6兼容性问题及IE6常见bug详细汇总

    转载地址:http://www.jb51.net/css/76894.html 1.IE6怪异解析之padding与border算入宽高 原因:未加文档声明造成非盒模型解析 解决方法:加入文档声明&l ...

  6. IE6 一些兼容性问题及处理方法

    1.IE6怪异解析之padding与border算入宽高 原因:未加文档声明造成非盒模型解析 解决方法:加入文档声明<!doctype html> 2.IE6在块元素.左右浮动.设定mar ...

  7. 重温CSS:Border属性

    边界是众所周知的,有什么新的东西吗?好吧,我敢打赌,在这篇文章中,有很多你不看永远不知道的东西! 不仅可以用CSS3来创建圆角,使用原有CSS一样可以显示自定义图形.这是正确的(有待考究):在过去,没 ...

  8. IE6常见bug整理

    By Diaoyude  | 发布时间: 09-08 09:47  | Hits:1,253 | Post in: WEB前端 , Div-Css 针对IE6常见的一些ie6bug,ie6png,E6 ...

  9. CSS hacker(兼容IE6、7、8)

    <meta http-equiv="X-UA-Compatible"  content="IE=edge,chrome=1">这行代码是永远以最新的 ...

  10. ie6常见的兼容性

    1.IE6怪异解析之padding与border算入宽高 原因:未加文档声明造成非盒模型解析 解决方法:加入文档声明<!doctype html> 2.IE6在块元素.左右浮动.设定mar ...

随机推荐

  1. 基于视觉的Web页面分页算法VIPS的实现源代码下载

    基于视觉的Web页面分页算法VIPS的实现源代码下载 - tingya的专栏 - 博客频道 - CSDN.NET 基于视觉的Web页面分页算法VIPS的实现源代码下载 分类: 技术杂烩 2006-04 ...

  2. Android Animation动画(很详细)

    Android Animation   Contents: Animations Tween Animations AnimationSet Interpolator Frame-By-Frame A ...

  3. 标准C函数库的使用方法

    本篇介绍若干经常使用的标准C函数的使用方法,主要介绍stdio(标准输入输出).math(数字函数库).time(时间函数库).stdlib(标准函数库)string(标准字符串函数)等. 最后更新  ...

  4. javascript date 加一天(明天)

    end = new Date(); end = new Date(end.valueOf() + 1*24*60*60*1000);

  5. Windows Server 2012 R2 服务器管理器介绍和配置使用

    1. 服务管理器是用于管理系统服务的管理工具.一般常用于windows系统,使用这个工具你可以启动.停止服务:设置服务是自动.手动启动或禁用:查看某个服务的相关信息:设置服务以什么用户启动等等(一般包 ...

  6. SQLite For .Net 已经整合了32位和64位

    以前引用SQLite.DLL的时候,如果是winform等桌面程序,还要分32位和64位不一样的DLL,但最近已经整合为一个包了 打开vs的程序包管理器控制器,输入: install-package ...

  7. 【转】20个令人敬畏的jQuery插件

    为网页设计师和开发推荐20个令人敬畏的jQuery插件.例如滑块,图像画廊,幻灯片插件,jQuery的导航菜单,jQuery文件上传,图像旋转器,标签的插件,用户界面​​元素,网络接触形式,模态窗口, ...

  8. checkbox、select、radio的设置与获取

    参考链接:http://www.cnblogs.com/xiaopin/archive/2011/09/13/2175190.html js版本: <!DOCTYPE html PUBLIC & ...

  9. oracle如何修改字段类型(oracle总体知识2)

    在一次做开发的时候,遇到需要将数据表的字段类型由number改成varchar,可是该字段又有值, 用  alter table t-name modify cname newType;会报错. 话说 ...

  10. Mac OS X Mavericks or Yosemite 安装Nginx、PHP、Mysql、phpMyAdmin

    翻译:http://blog.frd.mn/install-nginx-php-fpm-mysql-and-phpmyadmin-on-os-x-mavericks-using-homebrew/ 最 ...