先贴下各种浏览器下的效果图：
1、IE6
2、IE7
3、Chrome
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>真正兼容IE6以上的圆角头像</title>
<style type="text/css">
.header {
100px;
height: 100px;
background: url(/images/head.jpg) no-repeat center;
border-radius: 50px;
background-size: 100% 100%;
*filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/head.jpg',sizingMethod='scale');
*position: relative;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/head.jpg',sizingMethod='scale')9;
position: relative9;
}
.header div {
display: none;
*display: block;
display: block9;
100%;
height: 100%;
position: absolute;
z-index: 10;
left: 0;
top: 0;
background: url(/images/balay.png) no-repeat center;
}
</style>
<!--[if IE 6]>
<script type="text/javascript" src="/js/ie6-png.min.js"></script>
<script type="text/javascript">
DD_belatedPNG.fix('.header div');
</script>
<![endif]-->
</head>
<body>
<div class="header">
<div></div>
</div>
</body>
</html>