vertical-align表单元素垂直对齐（2）
作者：xidea 来源：蓝色理想 发布时间：2009-07-27 13:02:00
事实证明，FF3.5对于复选框和图片的垂直对齐方式是采用同样的规则进行渲染的，即将复选框当作一个正方形的图片(IE不是)。按照wheatlee“middle的时候，是该元素的中心对齐周围元素的中心”的观点，如果我在复选框后面输入英文字符，那么复选框的中心将与英文中小写字母x的中心对齐。经测试，FF3.5下面基本上是这样的(在一些字号的时候会有一定的误差，比如，如果字体高度是偶数，那么这个中心点有时在一般偏上1px，有时在一半偏下1px)。如图：
但是这对于中文来说，并不是一个好的结果。因为中文是方块字，并且相同字号的情况下，高度会比小写的x高出很多。所以，按照浏览器内置的方式，只用 vertical-align:middle是无论如何也无法对齐中文的（无论是只写中文，中文在前，英文在前，FF3.5都是按照小写x中心那种方法来对齐的）。但是回头再看看wheatlee的文章，他说这个小写x中心对齐的渲染方式，是对于“文字”来说的。那么，如果不是文字呢…？如果复选框后面跟的是一个行内元素，如label，而文字是写在它内部的，会是什么样呢？浏览器会不会将这个内联元素整体看作一个“块”，然后依照类似图片的规则进行渲染呢？如果那样，我们就达到目的了。
但是经过测试，很遗憾，事实并不是这样，加上label后跟没加没有任何区别。FF3.5/IE6/IE7均是如此。在FF3.5中用firebug看一下，证明浏览器并没有按照label的高度值来去对齐中心点。如图：
如果按照之前的设想，红蓝两线应该是重合的。但现在的情况是，它们相差了1px。并且这1px是没有规律的，随着字号的放大，并不恒定，貌似轻易也无法提炼出对应关系来。于是想到，再试一下将label也加上vertical-align:middle。结果如图：
在FF3.5和IE7下面已经很接近于我们希望的状态了，只差1px。IE6下… 无语了。
经过以上折腾，我得出了跟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中均显示正常。最终代码如下：
运行代码框
最终效果：
至此，多选框(checkbox)和提示文字对齐的问题已经解决，那么其他表单元素呢？试验了一下单选框(radio)，发现，还是有问题。提示文字依然是偏上。用firebug看了一下，发现radio元素默认有5px的左边距和3px的上、右边距，却没有下边距。如图：
0
投稿猜你喜欢
下一代的 web 已经开始上路了，就在这个星期，MySpace 集成了 Google Gears，雅虎发布了新的 BrowserPlus，G- 论坛经常有人会问到用CSS如何美化Select标签，其实但凡你看到很酷的都是用javascript来实现的。昨天试着做了一下，基本实现的初级
- 首先说说框架（Frameworks）这个词，框架就是为我们提供了一个平台一个运行环境，在如此统一的前提下我们做相关开发才能“有章可循”，要充
- 用JDBC实现对MySQL的“增删改查”：import java.sql.Connection;im
- 网页设计是由很多个不同的元素构成的,而这些元素的重要性都不同,并且有些元素还需要尤为的突出.有些元素彼此之间存在着联系,而另外的元素之间则一
- 数组我们已经提到过,对象是无序数据的集合,而数组则是有序数据的集合,数组中的数据(元素)通过索引(从0开始)来访问,数组中的数据可以是任何的
- asp替换函数如下：Function ReplaceNoIgnoreCase(str,replStr) &n
- 一、什么是sql子查询？ 子查询是一个嵌套在Select 、Insert 、Update 或Dele
- 如果你从未为MySQL设置根用户密码，服务器在以根用户身份进行连接时不需要密码。但是，建议你为每个账户设置密码。如果你以前设置了根用户密码，
- 个人网站如有会员注册模块+动网论坛的话，那网站要与动网论坛系统整合，实现不同Web系统之间的用户信息同步更新、登录等操作就不是件容易的事了，
- 从09年初接手淘宝手机网站前端开发的工作至今，转眼已是一年。一步步看着手机淘宝从最初的beta版本到今天的样子，感慨良多。手机网站开发，有着
- 讨论Web开发技术的历史，当然要先说说Web的起源。众所周知，Web这个Internet上最热门的应用架构是由Tim Berners-Lee
- CSS Sprites技术不新鲜，早在2005年 CSS Zengarden 的园主 Dave Shea 就在 ALA
- <％ Function FileCounter(counter_file) Dim fs,txt,fi
- 用ASP编写网站应用程序时间长了，难免会遇到各式各样的问题，其中关于如何上传文件到服务器恐怕是遇见最多的问题了，尤其是上传图片，比如你想要在
- 在HTML中，常见的URL有多种表示方式：相对URL： example.php demo
- Mysql数据库备份和还原常用的命令是进行Mysql数据库备份和还原的关键，没有命令，什么都无从做起，更谈不上什么备份还原，只有给系统这个命
- 因为即将开始淘宝的项目，在前端方面必然要深入了解taobao ued规范，规范还是比较全的，只是对taobao.com的编码和字符集的选择有
- 作者：Lachlan Hunt概要网络是不断的进化的. 新的和有创意的网站每天都在出现, 从各方面都在冲击着HTML的边界. HTML 4来
- 【尝尝管理员的滋味】- 淡然看,其实一切都很简单IE的滤镜泄露是最大的危害,没有找到方法解决,所以禁用了滤镜。<!DOCTYPE ht
