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>
以上所述的供讨论和参考,期盼大伙一些其它的想法和分享。
|