表单元素与提示文字无法对齐的问题(input,checkbox文字对齐）

文章的最终方法是：

1. 将文字第一字体设置为Tahoma；

2. 为input元素设置vertical-align:middle;

3. 为label元素设置vertical-align:middle;

       
这样表单元素和提示文字就达到完美的对齐了。但是等等这里说的对齐只是相对的对齐，原因是中文字体是方块字高度有可能是奇数或者偶数，input元素的高度是奇数当字体高度为偶数时，在网页中最小单位是1px，上下总是不能完美对齐的总有1px的差别。而这1px相对这里而言还是可以接受的。这样这篇文章对表单元素和提示文字的对齐问题探讨结束！

        但是给所有的input和label放到ul和li元素里并给li加上1px的实体border，再次在ie6和firefox中打开，结果使人大跌眼睛。IE6下input元素和label内的文字似乎对li上边框特别钟情，虽然对齐了文字却在li里向上飘移。即使我对input、label、
li都分别设置了line-height:;也无济于事。

怎么办？一位朋友的研究给了我启发，给label元素加上display:inline-block;这是奇迹出现了ie6和firefox表现一致；由此对关于input框对齐提示文字的探讨告一段落。总结最终的方法如下：
1. 将文字第一字体设置为Tahoma；
2. 为input元素设置vertical-align:middle;
3. 为label元素设置vertical-align:middle;display:inline-block;
虽然中间参考和借鉴的不少人的方法，但是总算对这一问题做了一个交代。

原文地址：http://blog.csdn.net/wangxiaohui6687/article/details/7875829
钻研方向： CSS：浏览器兼容、组件化开发、LESS、SASS 主流UI插件:bootstrap3及其扩展插件 新一代技术：html5、css3 移动开发：响应式布局、jqueryMobile、zenpto 基本：原生js、js面向对象、jquery源码 模块化：reaJS、requireJS 框架：angular(MVVM)、backbone(MVC) 服务器端：nodejs 常用工具：grunt(打包工具)