对img行间对齐以及vertical-align:middle的探讨

对于vertical-align:middle，w3的解释很简单：
Align the vertical midpoint of the box with the baseline of the parent box plus half the x-height of the parent.

这个x-height的定义是：
The x-height is so called because it is often equal to the height of the lowercase "x". However, an 'ex' is defined even for fonts that don't contain an "x".

单位“ex”的定义是：the 'x-height' of the relevant font，按理说如果选定了字体，x-height应该比em和px更靠谱，但操作系统、浏览器、字体版本等等各种各样的因素导致我们无法信任以字体为出发点的表现处理；

所以middle实际上应该是对齐到基线上方1/4倍ex的位置，但浏览器的处理各不相同，尤其是中英文混排的时候，虽然有人提出如下方案进行补足（如果认为1ex=0.5em，那应是0.25em，但考虑到中文的情况，修改为0.2em）：

img {vertical-align:middle;margin-bottom:0.2em}

但烦人的是随着系统环境的不断升级，如果你的用户很巨量，你要面对的新旧版本差异范围会越来越大，兼容or不兼容，这是个问题……

鉴于所有市面上的操作系统和浏览器都是中文苦手的，中英文混排时对line-height、baseline、x-height计算的混乱不是它们的错，更不是我们的错，而宋体5.0的出现和IE8的“文本模式”提醒我们：不能再跟这些属性较劲，一切交给浏览器去处理吧（把出错的原因都推给浏览器吧……@_@）

收藏到网摘：新浪VIVI  365Key  POCO网摘  和讯网摘  我摘