回顾完各种处理方式后，一起来了解一下实现上的细节，分析一下文章第一张图所示，共有38个图标，且都是图形化，原始想法是，把38个图合并成一个文件。但细心看，这38个图片，有好多的相同的图形，经过整理后，得到下面这张图：

除四个图标载体外，数字都是相同的，因为这里使用的是第四种处理方式，那么在图标的合并上，不用给各小图片块预留过多的透明区域。
雪碧图处理好以后，就可以着手写代码来实现效果了。

<strong class="gb_vip_1"><span><span>lv1</span></span></strong>
<strong class="gb_vip_2"><span><span>lv2</span></span></strong>

为了让标签具有img的特有属性，给strong定义display:-moz-inline-stack;display:inline-block;
因各浏览器兼容性的原因，需要定义了两个属性，这里不禁一定要问了，为什么不选用-moz-inline-box呢？这里选用-moz-inline-stack而非-moz-inline-box的原因是：

1. 使用-moz-inline-stack可以解决Firefox2不支持inline-block的问题，但是所有的Firefox版本对于属性为-moz-inline-stack的Element，它的First child element会继承该Element的宽度和高度，但是再下一级的Element不会再继承该属性。
2. 这里说说一下与本图标应用无关的话题，在实际应用中-moz-inline-box会存在元素间的对齐等问题，在处理自适应宽的<button>就能遇到。虽然Firefox有一个私有属性-moz-box-align来帮助解决Element水平对齐问题，但未能预见的问题依旧不少，而相对来说-moz-inline-stack的表现更像inline-block，这点可以在Firefox3中验证出来。仅管如此，-moz-inline-stack使用时也会有一个bug，如果一个moz-inline-stack的Element外层Element是inline属性就会使Firefox中其包含的链接不可点(和IE6的filter+position:absolute出现的BUG一样），这个可以借助position:relative;来解决。

设置完display属性后，我们就给图标定义宽高。实际的图标处理中，完成这两步基本就OK了。但是这个图标应用较为特殊，因为它是两个背景合成一个图标的（载体+等级数），如下图：

下面是两个载体的拼合示意：

所以在结构上加多了两个span，一个是给等级数字的背景载体，另一个是隐藏图标替换文字。

代码写完后，发现代码量相当的惊人，因为只在最外层定义不同的className，那么，就意味着，我们要对众多个类及其里面的标题定义：

.gb_vip_1 span,
.gb_vip_2 span,
.gb_vip_3 span,
.gb_vip_4 span,
.gb_vip_5 span,
.gb_vip_6 span,
.gb_vip_7 span

这样代码就相当臃肿，于是，改变className的定义方式，给各个等级图标最外层容器定义相同的命名，给里面数字的载体定义区别显示的命名(带数字的命名是方便逻辑实现)：

<strong class="gb_vip_icon"><span class="lv1"><span class="gb_vip_none">lv1</span></span></strong>
<strong class="gb_vip_icon"><span class="lv2"><span class="gb_vip_none">lv2</span></span></strong>

以上所述的供讨论和参考，期盼大伙一些其它的想法和分享。

原文：http://webteam.tencent.com/?p=1330

本文链接：http://www.blueidea.com/tech/web/2009/7214.asp　

出处：腾讯Webteam
责任编辑：bluehearts

上一页 由黄钻等级图标处理引发的思考 [2] 下一页

◎进入论坛网页制作、WEB标准化版块参加讨论，我还想发表评论。