关闭

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

标签: csshtml
148人阅读 评论(0) 收藏 举报

大多数网站的主流文字大小为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浏览器下的表现


0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:2864次
    • 积分:199
    • 等级:
    • 排名:千里之外
    • 原创:18篇
    • 转载:1篇
    • 译文:0篇
    • 评论:0条
    文章存档