CSS实例教程:vertical

2021-03-15 13:22 jianzhan

近期几日细心科学研究了1下vertical-align这个特性,結果让我大吃1惊,这个很“资深”的CSS规范居然在各个访问器里边的主要表现都不尽相同。
近期几日细心科学研究了1下vertical-align这个特性,結果让我大吃1惊,这个很“资深”的CSS规范居然在各个访问器里边的主要表现都不尽相同。
vertical-align的值有点多,包含 baseline sub supper top text-top bottom text-bottom middle和各种各样长度值(%,em,ex这些)。我先给大伙儿看1个我感觉最浮夸的值:bottom。编码以下:
p {
font-size: 18px;
line-height: 36px;
font-family: Tahoma, sans-serif;
}
img {
vertical-align: bottom ;
}

随后大伙儿看1看这段CSS在各个访问器中的实际效果(照片是我有意做成那个模样,以便能够看清晰相对性部位):





呃,这个結果实际上很令人匪夷所思,1般我会觉得Firefox会比IE解释得更改确,可是看过Opera以后发现它和IE是1样的,而Safari/Win是站在Firefox那边。说真话,我不知道道这是如何回事。
细心学习培训了《CSS权威性指南(第2版)》,乃至还去查阅了 W3C ,随后自身做出1个有关vertical-align的图:

依照W3C的界定,当内联元素的vertical-align设定为: baseline, top, bottom的情况下,全是该元素的baseline(或middle, top, bottom)对其周边元素的同样部位,如照片的top和周边文本的top对齐。 text-top和text-bottom的情况下,是该元素的top(或bottom)对齐周边元素的text-top(或text-bottom)。 长度(%, em, ex)的情况下,是根据baseline往上挪动,因此正数往上,负数往下。 middle的情况下,是该元素的管理中心对齐周边元素的管理中心。这里“管理中心”的界定是:照片自然便是height的1半的部位,而文本应当是根据baseline往上挪动0.5ex,亦即 小写字母“x”的正管理中心 。可是许多访问器常常把ex这个企业界定为0.5em,以致于实际上不1定是x的正管理中心(以上图为例,x的高宽比应当是10px,而em是18px,因此两个值不1样)。
可是,即便是依照上面的规则,各个访问器的解释这般迥然不同也让我匪夷所思。我也懒得去科学研究为何是这模样。总的来讲呢,应当便是它们对字体样式的每条线的部位的界定都不大1样,因此这个难题不单跟vertical-align相关,而跟访问器对内联文字和内联照片的构造的解释有很价位系。
最终给大伙儿1个检测网页页面,能够层面的看看各个访问器对vertical-align不一样值的解释結果。
http://www.mikkolee.com/weblab/001_vertical/
大伙儿能够检测1下别的的值,例如middle或是text-top,也是各个访问器彻底不1样。有甚么心得大伙儿来探讨1下吧~~