文档章节

复选框单选框与文字对齐问题的研究与解决

山哥
 山哥
发布于 2010/09/28 17:23
字数 1594
阅读 207
收藏 1

复选框单选框与文字对齐问题的研究与解决

by zhangxinxu from http://www.zhangxinxu.com
本文地址:http://www.zhangxinxu.com/wordpress/?p=56

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

雅虎中国首页单选框复选框与文字不对齐

雅虎中国首页单选框复选框与文字不对齐


这里,不是说,雅虎中国的团队不够认真,而因为这12px大小文字与单选框和复选框对齐的问题不是好解决的。考虑到兼容性,控件本身的特殊性以及代码成本的控制等,使得这个问题不是简单就能解决的。
这不是我第一次研究单选框复选框对齐的问题了,因为平时对这个问题注意的比较多,也经常做些测试,对这个问题还是有一定的了解,也总结了不少自己的解决方法。今天我就写下来,供交流与参考。

一、问题产生的条件
对于14像素大小的字体是没有本篇所要探讨的单(复)选框与文字对齐的问题的。(见下图)

14像素大小文字与单复选框无对齐的问题

14像素大小文字与单复选框无对齐的问题


但是,对于12像素大小的文字,则就存在对齐问题了,尤其在Firefox火狐浏览器以及chrome谷歌浏览器下。(见下图)

12像素文字相对于单复选框位置偏下不对齐

12像素文字相对于单复选框位置偏下不对齐


这就是本文所要研究与解决的问题。这种不对齐的根本原因我不清楚,但我可以肯定的是单复选框与文字默认以vertical-align:baseline的方式对齐的。

二、解决方案
下面我将提供五种解决方案,有三个方案没有使用任何hack,且IE6,IE7,Firefox,chrome浏览器下表现都很好的,有一种方案使用了一 个IE hack,但成本较低,各个浏览器表现良好。还有一种方案,代码成本很低,但在chrome浏览器下文字稍微偏上,使用input类型选择器,或 chrome hack可以解决这个问题,但是对于单复选框这类控件,代码一多反而不划算,权衡之下,不针对chrome浏览器单独处理。
这些方案都是经过平时积累,反复试验得出的结论,其兼容性值得信赖。要使用的话就给单复选框命名一个class,该class样式为下面方案提供的css样式即可。

1.以vertical-align:text-bottom为基础的

css代码如下:vertical-align:text-bottom; margin-bottom:2px; *margin-bottom:-2px;
css代码如下:vertical-align:text-bottom; margin-bottom:2px; margin-bottom:-2px\9;
结果如下图(以IE6浏览器和Firefox浏览器示例):
IE6浏览器下的样式表现

IE6浏览器下的样式表现

 

Firefox浏览器下的样式表现

Firefox浏览器下的样式表现

2.以vertical-align:text-top为基础的
css代码如下:height:13px; vertical-align:text-top; margin-top:0;
结果如下图(以IE7浏览器和chrome浏览器截图示例):

IE7下的样式表现

IE7下的样式表现

 

chrome下的样式表现

chrome下的样式表现

3.以vertical-align:bottom为基础的
css代码如下:height:15px; vertical-align:bottom; margin-bottom:3px; margin-top:-1px;
结果如下图(以IE6和Firefox浏览器截图做示例):

IE6下的表现

IE6下的表现

 

Firefox下的表现

Firefox下的表现

4.以vertical-align:top为基础的
css代码如下:height:14px; vertical-align:top;
结果如下图(chrome下文字略微偏上,其他浏览器下很完美,以IE7和chrome浏览器示例):

IE7下的表现

IE7下的表现

 

chrome下的表现-文字偏上

chrome下的表现-文字偏上

5.以vertical-align:middle为基础的
css代码如下:vertical-align:middle; margin-top:-2px; margin-bottom:1px;
结果如下截图(以IE6和Firefox示例):

IE6下的样式表现

IE6下的样式表现

 

Firefox浏览器下的表现

Firefox浏览器下的表现

最后的说明
*未显示在opera浏览器下测试的结果,原因一是opera市场份额奇怪的小,即使不管它也影响不大;二是减轻自己的截图,对比处理的工作量。这里就直 接用文字表述在opera浏览器下的表现吧。opera是个怪胎,应该来说,它对标准的支持应该是很好的,但是14像素的文字和单选框复选框却是不对齐 的,当然,12像素更不用说了。但是,在方案3和方案5下的表现却是意外的好,所以方案3和方案5是不错的方案。
*IE8浏览器下未测试,不是不想测,而是现在手头上就一台电脑,IE8由于系统原因,测不了,抱歉。
*以上方案不一定是最优的方法,我没有加入padding进行测试,还有其他一些属性,只要有时间,将各类组合一个一个的试验,可能会找到另外的方法。
*Firefox浏览器和chrome浏览器下的单选框和复选框默认是由一个margin值的。其两者的值大小近乎一致,拿chrome浏览器举例。在 chrome谷歌浏览器下,radio单选框的默认margin值是:margin:3px 3px 0 5px;checkbox复选框的margin值为margin:3px 3px 3px 4px;而IE浏览器下似乎没有margin值,但是对margin敏感。这是不用hack解决对齐问题的难点之一。
*最后,说句结论性的话,方案3和方案5从兼容性,代码的利用率,css的消耗等来讲都是我非常推荐的两种方法。建议您试试!

作者补充于11月3号凌晨2:40,曾在人人网的css代码中看到使用vertialc-align:-3px解决此问题,我试过,虽然表现不能用完美形容,但确实缓解了对齐的问题,是个性价比非常高的方法。我是建议您试试的。

尾声,献上本文的终极demo实例页面,狠狠地点击这里吧。

原创文章,转载请注明来自 张鑫旭-鑫空间-鑫生活 [http://www.zhangxinxu.com]

本文地址:http://www.zhangxinxu.com/wordpress/?p=56

(本篇完)

© 著作权归作者所有

共有 人打赏支持
山哥

山哥

粉丝 245
博文 351
码字总数 136465
作品 0
南京
程序员
私信 提问
Vue 2.0学习笔记:自定义表单组件

Vue 2.0学习笔记:自定义表单组件 W3CPlus2017-09-297 阅读 表单组件自定义 上一节中 ,通过 的学习,我们可以实现 双向数据绑定 的的效果。在整个教程中,我们看到的示例都是表单控件方面的...

W3CPlus
2017/09/29
0
0
单选框与复选框与后面的文字在电脑与手机上表现不一致的解决方法

如上图所示,单选框与文字在手机上不对齐,现解决方法如下: <label class="marginr30 shenbaolabel" style=""> <input type="radio" name="xuanzhe" style=" "> 日 </label> input{height:......

tianyawhl
2016/06/08
17
0
4.4、Bootstrap V4自学之路------组件---表单

表单控件 下面是一个Bootstrap支持的表控件以及自定义类的完整列表。额外的文档对每个组都是可用的。 类 作用 支持的变量 表单控件的任一组 用在任何块级元素上,比如说或 文本域控件 、 、、...

Asktao
2016/03/23
306
0
BalsamiqMockups3 原型制作工具使用笔记

今天研究了原型制作工具 - Balsamiq Mockups 3,在这里总结一下我的学习笔记。 我的操作系统版本为Win7,balsamiq版本为3.3.14,AdobeAirPlayer版本为WIN 21,0,0,174 1、注册码 这里还是要虚...

北风其凉
2016/05/01
981
1
适用于所有页面的基础样式base.css

这玩意,俗称base.css 几乎所有的页面,在搭建之前,都要用下面那个。BUT 一网打尽并不是最全的,最好的。还是要讲究需要什么用什么,小白知道怎么用就行了,而对于追求更高层次的而言,不仅...

顽皮的雪狐七七
01/17
0
0

没有更多内容

加载失败,请刷新页面

加载更多

给女朋友讲解什么是Optional【JDK 8特性】

前言 只有光头才能变强 前两天带女朋友去图书馆了,随手就给她来了一本《与孩子一起学编程》的书,于是今天就给女朋友讲解一下什么是Optional类。 至于她能不能看懂,那肯定是看不懂的。(学到...

Java3y
29分钟前
1
0
2019年六大新兴信息安全方向

导读 黑客攻击和网络犯罪的威胁正在不断升级,相应的技术“军备竞赛”正愈演愈烈,对于信息安全从业人员来说,掌握最新的信息安全工具,是在信息安全战争中生存下来的关键所在。 从特朗普的手...

问题终结者
35分钟前
1
0
redis扩展-自定义PropertyPlaceholderConfigurer,在spring属性注入之前,手动将properteis合并到spring容器中

背景:spring容器启动过程中,通过PropertyPlaceholderConfigurer读取properties配置文件,并将properties配置文件中的值注入spring bean的属性中, PropertyPlaceholderConfigurer使用方式多...

燃犀
37分钟前
0
0
PostgreSQL SPI 中的错误处理

PostgreSQL SPI 用于在 C 或是其他编程语言编写的扩展函数(存储过程)中调用数据库本身的解析器、规划器和执行器的功能,以及对 SQL 语句进行执行。 在最重要的一个函数 SPI_execute 的文档...

helloclia
38分钟前
0
0
深入理解Java内存模型

1 内存模型产生背景 在介绍Java内存模型之前,我们先了解一下物理计算机中的并发问题,理解这些问题可以搞清楚内存模型产生的背景。物理机遇到的并发问题与虚拟机中的情况有不少相似之处,物...

小刀爱编程
52分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部