很多场景都可以抽象为oocssmedia

5 Media Blocks

项目中也用的差不多了,不过最下面两个行内图标一直没这么做,如果能转换,必将节约不少的代码

考虑因素

现在的做法

目前的做法是inline-block的一个空标签来做图标,但和文字放一起在IE6中又会面对行高失效的Bug,解决方法有A fix to the IE6 line-height/replaced element bugMicrosoft Internet Explorer 6: Line-height / Replaced Element Bug,不甚灵活

思考

Yahoo! 首页的做法是图标和文字都inline-block并vertical-align:middle,估计是Thierry Koblentz去了之后带来的一些改变,很赞,但我们要抽象为media呀

在最初看网页中英文混排行高不等问题的解决方案探讨(也就是神奇的1.231,我个人的建议)的时候曾去找过1.231的由来

Default Text

With the CSS linked into the page, all text renders in the Arial font, at 13 pixel size, with 16 pixel line-height.

YUI中将字体设为13px,行高为16px,16除以13即为1.231,仅此而已

项目中常用的图标标准尺寸为16×16,将行高设为16px和图标一样高,文字也居中了,YUI是这么考虑的吗?翻遍文档和视频也没找到行高设为16px的原因…

中文默认字体一般设为12px,16除以12为1.333,浏览器行高默认值为normal,约为1.2,各浏览器有细微差异,Win7中字体高度比XP略高,1.2看起来会很挤,同时考虑Mac OS X 默认中文字体,依照向前兼容(Forward compatibility)的设计原则,1.333妥妥的

结论

body{font-size:12px;**line-height:1.333**;font-family:Tahoma}

若图标小于16×16则切图时当作16×16来处理(即画布大小为16×16,图标居中)

注:曾推荐给肉饼、小李刀刀、神飞、大猫翻译一些与此有关的文章,链接如下