ack;display:inline-block;
因各浏览器兼容性的原因，需要定义了两个属性，这里不禁一定要问了，为什么不选用-moz-inline-box呢？这里选用-moz-inline-stack而非-moz-inline-box的原因是：
- 使用-moz-inline-stack可以解决Firefox2不支持inline-block的问题，但是所有的Firefox版本对于属性为-moz-inline-stack的Element，它的First child element会继承该Element的宽度和高度，但是再下一级的Element不会再继承该属性。
- 这里说说一下与本图标应用无关的话题，在实际应用中-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>
以上所述的供讨论和参考，期盼大伙一些其它的想法和分享。
|
