|
|
马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。
您需要 登录 才可以下载或查看，没有帐号？立即注册
x
HTML标准自1999年12月发布的HTML4.01后，后继的HTML5和其它标准被束之高阁，为了推动Web标准化运动的发展.原文：http://www.mikkolee.com/13
比来几天细心研讨了一下vertical-align这个属性，了局让我年夜吃一惊，这个很“资深”的CSS尺度居然在各个扫瞄器内里的体现都各不不异。
vertical-align的值有点多，包含baselinesubsuppertoptext-topbottomtext-bottommiddle和各类长度值（%，em，ex等等）。我先给人人看一个我以为最夸大的值：bottom。代码以下：
p{
font-size:18px;
line-height:36px;
font-family:Tahoma,sans-serif;
}
img{
vertical-align:bottom;
}
然后人人看一看这段CSS在各个扫瞄器中的效果（图片是我存心做成谁人模样，为了能够看分明绝对地位）：
呃，这个了局实在很让人匪夷所思，一样平常我会以为Firefox会比IE注释得改正确，可是看过Opera以后发明它和IE是一样的，而Safari/Win是站在Firefox何处。说假话，我不晓得这是怎样回事。
细心进修了《CSS威望指南（第二版）》，乃至还往查阅了W3C，然后本人做出一个关于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，也是各个扫瞄器完整纷歧样。有甚么心得人人来会商一下吧～～
</p>
但他也直言说，这就像写软件时，在添加改善的新功能时，难免遭遇稳定性的问题，必须先把问题清除干净，才能推出新产品。 |
|
|Archiver|手机版|仓酷云
鄂ICP备14007578号-2
发表于 2015-1-15 23:29:40
收藏
转播
分享
淘帖
顶
踩
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
照妖镜
窥视卡
雷达卡
发表于 2015-2-25 19:05:10