最近的项目涉及到很多表单的制作，特别是复选框(checkbox)和单选框(radio)。但是在前端开发过程中发现，单(复)选框和它们后面的提示文字在不进行任何设置的情况下，是无法对齐的，而且在Firefox和IE中相差甚大。即使设置了vertical-align:middle，也依然不能完美对齐。如下图所示： 于是上网查看了一些网站，发现这个问题是普遍存在的，如下图（FF3.5）： 在很多网站涉及到表单的页面中，都存在这种表单元素与提示文字无法对齐的问题。于是打算研究一下这个问题。首先，搜索到了wheatlee前辈的文章《大家都对vertical-align的各说各话》。wheatlee在他的文章中关于垂直居中提到了这样几个关键点： 1、vertical-align:middle的时候，是该元素的中心对齐周围元素的中心。 2、这里“中心”的定义是：图片当然就是height的一半的位置，而文字应该是基于baseline往上移动0.5ex，亦即小写字母“x”的正中心。但是很多浏览器往往把ex这个单位定义为0.5em，以至于其实不一定是x的正中心（baseline等名词如果不懂，请先阅读wheatlee的文章） 按照这个思路，对照我遇到的问题，首先想到的是先验证一下浏览器对于“复选框”和图片是不是使用同样的规则来渲染（是不是把复选框当成一个正方形图片来对待）。于是写出下面的代码： <style>body{font-size:12px;}</style><input style="vertical-align:middle;" name="test" type="checkbox"><img style="vertical-align:middle;"  src="testpic.gif" />测试文字 代码中的testpic.gif是一个尺寸与复选框完全一样的黑色图片。FF3.5下显示如下： 上一页12 3 4 下一页

　　推荐阅读

　　HTML small标记使用技巧

类似于<em></em>之类的短语元素，既可以改进文档结构，同时也保留了预期的视觉样式。但<small></small>在平时应用中不是很常见，第一眼的影响是淘宝UED是不是在这个小问题上疏忽了？ 关于<small></small>，网上搜>>>详细阅读

本文标题：表单元素与提示文字无法对齐的问题

地址：http://www.17bianji.com/kaifa2/XML/15687.html

 1/2    1