vertical-align 各属性分析

vertical-align 定义：设定自己容器跟父级容器的对齐标准。
默认是baseline，英文文字的baseline (中文字有些浏览器不一样) 各属性详解

纯文本流：

对齐默认是 baseline

各个浏览器特殊表现：
所有浏览器都统一, IE 各个浏览器会有line-height 上下波动(字体不同时上下抖动幅度会不一样)
IE7文字上偏1px，图片对齐也相应对齐

English 图片比文字大 //1// 图片差不多 //// 小图片

中间对齐： vertical-align: middle

理论来说 应该使用middle 来实现剧中对齐，但发现各个浏览器表现差距较大

各个浏览器特殊表现：
IE6：只有IE6表现得最理想，保持完美剧中
IE7：所有图片偏上2px
IE89 FF chrome：所有图片偏下1px

English 图片比文字大 //// 图片差不多 //// 小图片

顶部对齐： vertical-align: top

top 的对齐依赖 行高

各个浏览器特殊表现：
由于是依赖行高，所有浏览器都统一。

English 图片比文字大 //// 图片差不多 //// 小图片

底部对齐： vertical-align: bottom

bottom 的对齐依赖 行高

各个浏览器特殊表现：
由于是依赖行高，所有浏览器都统一。

English 图片比文字大 //// 图片差不多 //// 小图片

（给力）负像素对齐： vertical-align：-px

为了图片同文字对齐，给图片设置 vertical-align:px 来实现对齐，负值代表图片往下移

各个浏览器特殊表现：
IE67：文字下方的背景色有拉长，不知道为什么？（研究发现是字体原因，使用tahoma 就ok）
IE6: 由于上面的bug。导致img3(比文字小的图片)对齐发生变化。偏下2px (仍然是baseline对齐)
IE7：图标上偏2px (目前IE7 版本用户很少可无视)
优缺点：
优点：便于定位
缺点：是属于绝对定位性质，不会随着文字变大而相应改变位置，需要针对不同尺寸的图设置不同的值

English 图片比文字大 //// 图片差不多 //// 小图片