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

转载 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浏览器下的表现


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

今天开始学JavaScript (以下是归纳) JavaScript document.write() 输出内容(相当C语言里的printf) var 变量名 ...

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

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

南大软院大神养成计划-Web前端入门学习归纳第二天-认识前端开发工具Dreamweaver(2)

接上篇 五、智能提示功能 DW对各种不同的语言文件的各种标签、CSS文件的各种属性、编写代码时的各种操作、JAVAscript语言中的函数关键字等都有提示,对语法错误也会立即在行号上有提示,这些对...

【南大软院大神养成计划:第六天】DW开发环境初探(一)

进行了两次网页布局的学习之后,要写代码的课程多了起来,于是跑回前面去补一下开发环境的基础知识,磨刀不误砍柴工,下面贴出学习笔记,纯手工。。。 ============================...

“南大软院大神养成计划“_第六天的学习“

今天学习的内容是HTML+CSS基础课程,将HTML基础之前剩下的学完了。     使用下拉列表框,节省空间     1.主要的就是学会使用选项和selected="selected"。selec...

“南大软院大神养成计划“_第十九天的学习“

失焦事件   function message(){     alert("请确定已输入密码后,在移开!"); }          用户:    密码:...

南大软院大神养成计划--第一天学习HTML+CSS的基础归纳

其实前天晚上注册开始学的,大一网页算辅修课,玩了几下只,现在忘得差不多了,现在有机会把它捡起来了,哈哈!! 从头慢慢看过来,与去年相比,发现老师讲还不如在这个网站自学。老师开课直接跳过基础,发个PP...

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

今天是南大软院大神养成计划实施的第十八天。今天还是继续学习jQuery基础部分。 一.jQuery常用插件 表单验证插件——validate 该插件自带包含必填、数字、URL在内容的验证规则,即时显示...

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

今天是南大软院大神养成计划实施的第十六天,今天继续学习jQuery基础。 一.过滤性选择器 该类型的选择器是根据某过滤规则进行元素的匹配,书写时以“:”号开头,通常用于查找集合元素中的某一位置的单个元...

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

今天是南大软院大神养成计划实施的第十九天。今天继续学习jQuery基础部分,jQuery基础部分确实蛮多的。 一·jQuery UI型插件 拖曳插件——draggable 拖曳插件draggab...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:南大软院大神养成计划--第四天单/复选框与文字对齐问题
举报原因:
原因补充:

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