快速业务通道

网页重构:由网页图标处理引发的思考

作者 佚名技术 来源 CSS技术 浏览 发布时间 2012-02-29
ack;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://www.lingzhong.cn 为了给广大客户了解更多的技术信息,本技术文章收集来源于网络,凌众科技尊重文章作者的版权,如果有涉及你的版权有必要删除你的文章,请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息,谢谢!

分享到: 更多

Copyright ©1999-2011 厦门凌众科技有限公司 厦门优通互联科技开发有限公司 All rights reserved

地址(ADD):厦门软件园二期望海路63号701E(东南融通旁) 邮编(ZIP):361008

电话:0592-5908028 传真:0592-5908039 咨询信箱:web@lingzhong.cn 咨询OICQ:173723134

《中华人民共和国增值电信业务经营许可证》闽B2-20100024  ICP备案:闽ICP备05037997号