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

本文探讨了解决12px字体与单选框、复选框等表单元素对齐的问题,提供了两种兼容性好的方案,并附带了在不同浏览器下的表现效果。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

摘要:

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

 

文章链接:http://www.zhangxinxu.com/wordpress/?p=56

 

为解决这一问题,张鑫旭测试了五种方案,并推荐了其中两种兼容性较好的方案。分别为:

 

1、以vertical-align:bottom为基础的

height:15px; vertical-align:bottom; margin-bottom:3px; margin-top:-1px;

 

IE6下 的表现:

IE6下的表现

Firefox下的表现:

Firefox下的表现

 

2、以vertical-align:middle为基础的

vertical-align:middle; margin-top:-2px; margin-bottom:1px;

 

IE6 下的样式表现:

IE6下的样式表现

 

Firefox浏览器下的表现:
Firefox浏览器下的表现

 

看到这,我突然想到这两个方案对解决图片按钮与周边文字对齐的恼人问题可能也有效,这个倒要抽空测试测试。

 

参看另一篇相关文章:checkbox复选框的一些深入研究与理解

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值