DDR爱好者之家

CSS教程：vertical-align的值
站长资源 2024/11/24 佚名
62 1538
DDR爱好者之家 Design By 杰米

最近几天仔细研究了一下vertical-align这个属性，结果让我大吃一惊，这个很“资深”的CSS标准竟然在各个浏览器里面的表现都各不相同。
最近几天仔细研究了一下vertical-align这个属性，结果让我大吃一惊，这个很“资深”的CSS标准竟然在各个浏览器里面的表现都各不相同。
vertical-align的值有点多，包括 baseline sub supper top text-top bottom text-bottom middle以及各种长度值（%，em，ex等等）。我先给大家看一个我觉得最夸张的值：bottom。代码如下：
p {
font-size: 18px;
line-height: 36px;
font-family: Tahoma, sans-serif;
}
img {
vertical-align: bottom ;
}
然后大家看一看这段CSS在各个浏览器中的效果（图片是我故意做成那个样子，为了可以看清楚相对位置）：
CSS教程：vertical-align的值
CSS教程：vertical-align的值
CSS教程：vertical-align的值
CSS教程：vertical-align的值
CSS教程：vertical-align的值
呃，这个结果其实很让人匪夷所思，一般我会认为Firefox会比IE解释得更正确，但是看过Opera之后发现它和IE是一样的，而Safari/Win是站在Firefox那边。说实话，我不知道这是怎么回事。
仔细学习了《CSS权威指南（第二版）》，甚至还去查阅了 W3C ，然后自己做出一个关于vertical-align的图：
CSS教程：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的一半的位置，而文字应该是基于baseline往上移动0.5ex，亦即 小写字母“x”的正中心 。但是很多浏览器往往把ex这个单位定义为0.5em，以至于其实不一定是x的正中心（以上图为例，x的高度应该是10px，而em是18px，所以两个值不一样）。
但是，即使是按照上面的准则，各个浏览器的解释如此迥异也让我匪夷所思。我也懒得去研究为什么是这样子。总的来说呢，应该就是它们对字体的每一条线的位置的定义都不大一样，所以这个问题不单跟vertical-align有关，而跟浏览器对内联文本和内联图片的结构的解释有很大关系。
最后给大家一个测试页面，可以方面的看看各个浏览器对vertical-align不同值的解释结果。
http://www.mikkolee.com/weblab/001_vertical/
大家可以测试一下其他的值，比如middle或是text-top，也是各个浏览器完全不一样。有什么心得大家来讨论一下吧～～
DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米