作者:xidea 时间: 2009-07-27 文档类型:原创 来自:蓝色理想
第 1 页 vertical-align表单元素垂直对齐 [1] 第 2 页 vertical-align表单元素垂直对齐 [2] 第 3 页 vertical-align表单元素垂直对齐 [3] 第 4 页 vertical-align表单元素垂直对齐 [4]
经过以上折腾,我得出了跟wheatlee相同的结论,就是,各种浏览器之间对这个问题的处理貌似没有任何规律。并且,似乎每一种浏览器对于 vertical-align:middle的渲染都不是完全遵从W3C所说的“Align the vertical midpoint of the box with the baseline of the parent box plus half the x-height of the parent.”
但是经过仔细总结和分析,发现好像最终对齐的结果跟label的高度和当前字体中小写x的中心点都有关系,两者同时影响着渲染结果(虽然不明白为什么会这样)。那么,既然现在的情况以及非常接近于希望的状态了,是否可以通过设置字体的方式来改变小写x的中心点的位置,进而对垂直对齐的结果进行“微调”呢?
最终,在不断的测试中发现,如果将font-family中的第一个字体设置为Tahoma,则可以完美的实现对齐(Verdana等字体也可以)。而且在FF3.5/IE6/IE7/IE8和Chrome中均显示正常。最终代码如下:
运行代码框<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtm"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>测试vertical-align</title> <style> label{vertical-align:middle} .inputcheckbox{vertical-align:middle;} body{font-family:tahoma;font-size:12px;} </style> </head> <body> <input class="inputcheckbox" name="test" value="1" type="checkbox"> <label>测试文字x</label> </html> [Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]
最终效果:
至此,多选框(checkbox)和提示文字对齐的问题已经解决,那么其他表单元素呢?试验了一下单选框(radio),发现,还是有问题。提示文字依然是偏上。用firebug看了一下,发现radio元素默认有5px的左边距和3px的上、右边距,却没有下边距。如图:
出处:蓝色理想 责任编辑:bluehearts
上一页 vertical-align表单元素垂直对齐 [2] 下一页 vertical-align表单元素垂直对齐 [4]
◎进入论坛网页制作、WEB标准化版块参加讨论,我还想发表评论。
蓝色理想版权申明:除部分特别声明不要转载,或者授权我站独家播发的文章外,大家可以自由转载我站点的原创文章,但原作者和来自我站的链接必须保留(非我站原创的,按照原来自一节,自行链接)。文章版权归我站和作者共有。
转载要求:转载之图片、文件,链接请不要盗链到本站,且不准打上各自站点的水印,亦不能抹去我站点水印。
特别注意:本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有,文章若有侵犯作者版权,请与我们联系,我们将立即删除修改。