目前中文网站上面的文字,就我的个人感觉而言,绝大多数网站的主流文字大小为12px,因为在目前高分辨率显示器屏幕下,11px的汉字,其像素点开始不规整,文字不如12px来的显示良好。12px大小的文字就是主流也是底线。然而12px的文字与单选框和复选框是不对齐的。


下面是一些解决方案,以备用查.

<style type="text/css">
.zxx_exp{display:block; color:#34538b; margin-top:5px; margin-left:4px;}
.input_align_1{vertical-align:text-bottom; margin-bottom:2px; *margin-bottom:-2px;}
.input_align_2{height:13px; vertical-align:text-top; margin-top:0;}
.input_align_3{height:15px; vertical-align:bottom; margin-bottom:3px; margin-top:-1px;}
.input_align_4{height:14px; vertical-align:top;}
.input_align_5{vertical-align:middle; margin-top:-2px; margin-bottom:1px;}
</style>


实际效果:

单选框   复选框当文字14px左右大小时,对齐良好


单选框   复选框当文字12px左右大小时,文字的位置就偏下了,火狐浏览器和谷歌浏览器下尤为明显


单选框   复选框当文字12px左右大小时,单(复)选框设置vertical-align:text-bottom; margin-bottom:2px; *margin-bottom:-2px;样式后的表现


单选框   复选框当文字12px左右大小时,单(复)选框设置height:13px; vertical-align:text-top; margin-top:0;样式后的表现


单选框   复选框当文字12px左右大小时,单(复)选框设置height:15px; vertical-align:bottom; margin-bottom:3px; margin-top:-1px;样式后的表现


单选框   复选框当文字12px左右大小时,单(复)选框设置height:14px; vertical-align:top;样式后的表现,chrome谷歌浏览器下文字稍微偏上


单选框   复选框当文字12px左右大小时,单(复)选框设置vertical-align:middle; margin-top:-2px; margin-bottom:1px;样式后的表现