南大软院大神养成计划--第四天单/复选框与文字对齐问题

转载 2015年11月19日 23:41:09

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

一、问题的出现

我们看下14px字体与单/复选框对齐

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

所以就不说14px了。


再来看下12px的

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

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


二、解决方法

下面我是解决方案,有三个方案没有使用任何hack,且IE7,Firefox,chrome浏览器下表现都很好的。

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;

结果如下图(以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:middle为基础的


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

Firefox浏览器下的表现


南大软院大神养成计划——第四天

时间飞逝了,转眼间就离南大软院大神养成计划实施有4天,这4天说长也不长,说短也不短,对于南大软院大神养成计划来说,算蛮长的了,比较已经过了1/7,对于大学生涯,这四天根本不算什么,但是假如我们珍惜每一...
  • qq_23418043
  • qq_23418043
  • 2015年11月19日 20:54
  • 220

南大软院大神养成计划第四天

今天深入学习了CSS的相关应用,CSS在基础应用下还具有继承、层叠等特殊性。                            还有盒模型的应用,margin-top、margin-right、...
  • jx370
  • jx370
  • 2015年11月19日 17:58
  • 176

南大软院大神养成计划-第四天

学习心得   今天了解了一下 Sublime  Text 3 软件的部分使用方法,虽然Sublime  Text 2的稳定性更强,但是Sublime  Text 3 新增了不少功能,它启动非常的快,...
  • z15179324968
  • z15179324968
  • 2015年11月19日 23:53
  • 77

【南大软院大神养成计划:第一天】种下21天,收获不一样的自己——前端养成启程!

在第一天的学习小节前,想先说一说自己的经历,所谓回顾历史,面向未来....     高考完,知道自己被南大软院录取时,心里被两股情绪塞满,那股红色的是欣喜,欣喜从初中就铸下学IT的理想的我终于可以做...
  • Sonshines
  • Sonshines
  • 2015年11月16日 20:52
  • 730

南大软院大神养成第四天

html标签部分。 增加水平线 无序标签 无序标签 1有序标签 2有序标签 为表格添加标题和摘要 表格第一行第一列加粗显眼 第二行第一列...
  • valentine111
  • valentine111
  • 2015年11月28日 18:54
  • 101

大神养成计划第二天 --南大软院大神养成计划

今天是大神养成计划第二天,看了慕课网的div+css页面布局,明白了一个网页都是有一个个的盒模型布局构成。所以我们做一个网页前,必须先对页面进行布局。我们可以把一个网页大致分为头部header,中间部...
  • u013175229
  • u013175229
  • 2015年11月17日 21:33
  • 600

南大软院大神养成计划

 通过今晚的学习,认识到sublime是一个功能强大的软件,同时也初步了解了sublime菜单栏的主要功能。...
  • h2498864708
  • h2498864708
  • 2015年11月16日 21:40
  • 196

南大软院大神养成计划-第二天

学习心得   第二天的学习就这么愉快的结束了,通过对web课程的学习,我对DW的使用有更深入的了解,懂得了更多关于如何使用这个软件功能的知识,特别是如何更加智能的识别程序的错误。    其中,...
  • z15179324968
  • z15179324968
  • 2015年11月17日 23:51
  • 81

南大软院大神养成计划第十八天

               复习一下DOM模型中的与节点有关的属性 节点属性 在文档对象模型 (DOM) 中,每个节点都是一个对象。DOM 节点有三个重要的属性 : 1. nodeNam...
  • jx370
  • jx370
  • 2015年12月03日 13:04
  • 534

南大软院大神养成计划——第九天

今天是南大软院大神养成计划实施的第九天,今天学习的主要内容是DOM探索之基础详解篇的剩余两章内容,最后两章内容主要讲解的是“如何判断节点元素类型”和“继承层次和嵌套规则”。 先讲讲“如何判断节点元素...
  • qq_23418043
  • qq_23418043
  • 2015年11月24日 14:38
  • 337
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:南大软院大神养成计划--第四天单/复选框与文字对齐问题
举报原因:
原因补充:

(最多只允许输入30个字)