椭圆进度条
预览
预览
HTML结构定义
如果是矩形的进度条，就不会有此步之外的烦恼了。
<div class="progress-bar dashed">
<h3>18 GEKAUFT</h3>
<div class="num">
<span class="min">13</span>
<span class="progress-bar-image">
<span class="subject" style="width:18px;"> 18 </span>
<span class="cover"></span>
</span>
<span class="max">50</span>
</div>
<p>Noch 41 käufer werden benötigt!</p>
</div>
如上所示，进度条的视觉长度在'span.subject'，上面直接控制CSS长度的定义。
关于
IE6对透明PNG支持不佳，在此使用了IEPNGFIX行为脚本：
<style type="text/css">
.progress-bar .progress-bar-image, .progress-bar .progress-bar-image span{behavior: url(css/iepngfix.htc);}
.progress-bar>span{behavior:none;}
</style>
<!--[if lt IE 7]>
<script type="text/javascript" src="css/iepngfix_tilebg.js"></script>
<![endif]-->
同时,IEPNGFIX当前版本对于单张图片背景定位支持不错。但当我进展到CSS Sprite这一步时，IE6在Z轴最上面的一张，用来做遮盖的图片溢出了3个像素，解决如下：
<style type="text/css">
*html .progress-bar .progress-bar-image{overflow:hidden; height:22px;}
</style>
图片的叠加顺序：
