CSS中复选框单选框与常用12px文字不对齐问题(转载)

原文  http://www.cnblogs.com/aobingyan/p/3823556.html,有删改

  目前中文网站上面的文字,绝大多数网站的主流文字大小为12px,因为在目前高分辨率显示器屏幕下,11px的汉字,其像素点开始不规整,文字不如12px的显示良好。

12px大小的文字就是主流也是底线。然而12px的文字与单选框和复选框是不对齐的。例如下面这张雅虎 中国首页在火狐 浏览器下的截图:

这里不是因为雅虎中国的团队不够认真,而是因为这12px大小文字与单选框和复选框对齐的问题不是好解决的。

考虑到兼容性,控件本身的特殊性以及代码成本的控制等,使得这个问题不是简单就能解决的。

一、问题产生的条件

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

但是,对于12像素大小的文字,则就存在对齐问题了,尤其在 Firefox火狐浏览器以及

这就是本文所要研究与解决的问题。这种不对齐的根本原因我不清楚,但我可以肯定的是单复选框与文字默认以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浏览器示例):

chrome谷歌浏览器下。(见下图)

2.vertical-align:text-top为基础的

css代码如下:

  height:13px; vertical-align:text-top; margin-top:0;

结果如下图(以IE7浏览器和chrome浏览器截图示例)

3.vertical-align:bottom为基础的

css代码如下:

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

结果如下图(以IE6和Firefox浏览器截图做示例):

4.vertical-align:top为基础的

css代码如下:

  height:14px; vertical-align:top;

结果如下图(chrome下文字略微偏上,其他浏览器下很完美,以IE7和chrome浏览器示例):

5.vertical-align:middle为基础的

css代码如下:

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

结果如下截图(以IE6和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/study/200908/radio-chechbox-text-align.html

时间: 09-18

CSS中复选框单选框与常用12px文字不对齐问题(转载)的相关文章

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

前言:今天碰到的这个问题, 恰好找到一个很好的博文, 在这里转载过来 学习下. 原文地址:复选框单选框与文字对齐问题的研究与解决. 目前中文网站上面的文字,就我的个人感觉而言,绝大多数网站的主流文字大小为12px,因为在目前高分辨率显示器屏幕下,11px的汉字,其像素点开始不规整,文字不如12px来的显示良好.12px大小的文字就是主流也是底线.然而12px的文字与单选框和复选框是不对齐的.例如下面这张雅虎中国首页在火狐浏览器下的截图: 雅虎中国首页单选框复选框与文字不对齐 这里,不是说,雅虎中

PyQt4单选框QCheckBox

PyQt4中的部件 部件是构建应用程序的基础元素.PyQt4工具包拥有大量的种类繁多的部件.比如:按钮,单选框,滑块,列表框等任何程序员在完成其工作时需要的部件. QCheckBox单选框 单选框具有两个状态:被选中或未被选中.它看起来像一个附加了附件的标签.当用户选择或取消选择时,单选框就会发送一个stateChanged()信号. #!/usr/bin/python # -*- coding: utf-8 -*- import sys from PyQt4 import QtGui, QtC

[CSS揭秘]自定义单选框和复选框

很多Web前端工程师肯定都会遇到过,在项目中,UI设计师跑来跟你说,我这个地方的表单控件需要设计成这个样子那个样子.但是用CSS却不能够修改这些控件的默认样式,于是乎,只能通过div+javascript技术来进行模拟.特别是在如今移动端的崛起时代,更加注重用户的体验.于是就更加需要这样一种hack技术. 如果对如今的前端框架有过了解,都会知道组件这个概念.那么在这些框架中,都会提供一些单选框或复选框按钮组件.可见大家之前受到表单元素的默认样式的毒害有多深. 今天先给大家简单介绍一下如何通过CS

Bootstrap 表单和图片 (内联表单,表单合组,水平排列,复选框和单选框,下拉列表,校验状态,添加额外的图标,控制尺寸,图片)

一.表单 基本格式 注:只有正确设置了输入框的 type 类型,才能被赋予正确的样式. 支持的输入框控件 包括:text.password.datetime.datetime-local.date.month.time.week. number.email.url.search.tel 和 color. <form> <div class="form-group"> <label>电子邮件</label> <input type=&

选中和取消选中复选框实现背景变色和取消变色

选中和取消选中复选框实现背景变色和取消变色:为了提高表格这种新闻列表的人性化程度,当前有很多措施,最为常见是鼠标悬浮行变色或者隔行变色,本章介绍一下另一种形式,就是前面有一个复选框,选中和取消选中复选框能够实现对应行背景变色或者取消变色,代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content=&

纯css3实现的超炫checkbox复选框和radio单选框

之前为大家分享了好多css3实现的按钮.今天要为大家分享的是纯css3实现的checkbox复选框和radio单选框,效果超级炫.先让我们看看图吧! 在线预览   源码下载 这个实例完全由css3实现的没有任何js代码.下面我们一起看下实现代码吧 html代码: <div style="width:200px; float:left"> <label> <input type="checkbox" class="option-

用jquery修改默认的单选框radio或者复选框checkbox选择框样式

默认的radio和checkbox选框很难看.我去看了一下qq注册的页面.发现单选和复选框并没有用<input>,居然是用是A标签.然后用css背景图片展示选择框,用JavaScript控制切换.然后我自己用jqeury写了一个这样功能的. 先是html代码 性别 <div id="box-6"> <label>性别</label> <a href="#" name="male" id=&qu

Jquery学习笔记:操作form表单元素之二(复选框和单选框)

在上面文章的基础上,我们介绍如何操作表单元素中的 复选框和单选框. 一.复选框 <label> <input type="checkbox" id="item" checked> 全选</label> 注意,input标签要放在label标签内,这样点击文字时也会有反映. 如果选中了,调用  $("#item").prop("checked")返回true,否则返回false 同样利用pro

css3的实现的checkbox复选框和radio单选框绚丽美化效果

css3的实现的checkbox复选框和radio单选框绚丽美化效果:在css3之前要美化单选框和复选框无非是使用图片进行相关的替换操作,并且还有很大的局限性.由于css3的出现,一切好像变的都变的轻松起来,并且效果非常的绚丽,这是使用css2无法做到的,下面就分享一段能够实现此功能的代码实例,需要的朋友可以做一下参考.代码如下: <!DOCTYPE html><html> <head> <meta charset=" utf-8"> &