程序员经验分享-hwhale

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

2023-05-16
原文地址： http://www.zhangxinxu.com/wordpress/?p=56

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

雅虎中国首页单选框复选框与文字不对齐

雅虎中国首页单选框复选框与文字不对齐


这里，不是说，雅虎中国的团队不够认真，而因为这12px大小文字与单选框和复选框对齐的问题不是好解决的。考虑到兼容性，控件本身的特殊性以及代码成本的控制等，使得这个问题不是简单就能解决的。
这不是我第一次研究单选框复选框对齐的问题了，因为平时对这个问题注意的比较多，也经常做些测试，对这个问题还是有一定的了解，也总结了不少自己的解决方法。今天我就写下来，供交流与参考。

一、问题产生的条件
对于14像素大小的字体是没有本篇所要探讨的单（复）选框与文字对齐的问题的。（见下图）

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

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


但是，对于12像素大小的文字，则就存在对齐问题了，尤其在Firefox火狐浏览器以及chrome谷歌浏览器下。（见下图）
12像素文字相对于单复选框位置偏下不对齐

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


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

IE6浏览器下的样式表现

IE6浏览器下的样式表现


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:bottom为基础的
css代码如下：height:15px; vertical-align:bottom; margin-bottom:3px; margin-top:-1px;
结果如下图（以IE6和Firefox浏览器截图做示例）：

IE6下的表现

IE6下的表现


Firefox下的表现

Firefox下的表现

4.以vertical-align:top为基础的
css代码如下：height:14px; vertical-align:top;
结果如下图（chrome下文字略微偏上，其他浏览器下很完美，以IE7和chrome浏览器示例）：

IE7下的表现

IE7下的表现


chrome下的表现-文字偏上

chrome下的表现-文字偏上

5.以vertical-align:middle为基础的
css代码如下：vertical-align:middle; margin-top:-2px; margin-bottom:1px;
结果如下截图（以IE6和Firefox示例）：

IE6下的样式表现

IE6下的样式表现


Firefox浏览器下的表现

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的消耗等来讲都是我非常推荐的两种方法。建议您试试！


终极DEMO

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

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

随机推荐

  • I2C通信

    I2 C 芯片间 总线接口连接微控制器和串行 I 2 C 总线 它提供多主机功能 xff0c 控制所有 I 2 C 总线特定的 时序 协议 仲裁和定时 1 xff0c 物理层 1 IIC是一种两线串行的通信方式 xff0c SCL xff0

  • 使用Mybatis-Plus代码生成器的报错解决

    使用Mybatis Plus的同学 xff0c 在使用代码生成器的时候不知道有没有遇到过这个问题 xff1a 21 36 23 829 main DEBUG com baomidou mybatisplus generator AutoGe

  • Debian之安装完成后找不到命令解决办法

    1 修改配置文件 bashrc vim root bashrc export PATH 61 PATH usr sbin 2 使配置文件生效 source root bashrc

  • 相机标定、双目相机标定（原理）、三维重建效果展示

    1 相机标定的目的 xff1a xff08 1 xff09 通过单目相机标定分别求出左右相机的内参数和外参数 xff08 2 xff09 矫正由于镜头畸变造成的图片的变形 xff0c 例如 xff0c 现实中的直线 xff0c 拍摄成图像后

  • mac系统做openstack qcow2/raw镜像

    1 vmware安装出来虚拟机 xff08 操作系统不拆分 xff09 2 zhangjinyudeMacBook Pro Asianux vmwarevm zhangjinyu ls lh total 2820216 rw 1 zhang

  • 使用 Chrome 获取 Cookie 的数据

    Chrome 浏览器自带的开发功能相当强大 xff0c 这里只使用它的抓包功能 一 在浏览器中打开目标网站并登录 xff0c 进入目标页面 二 在 Chrome 浏览器下方的开发工具中单击 Network 标签页 按 F5 键 xff0c

  • 后台开发SQL技术总结

    一 字符串截取 1 substring str pos 用法 从字符串的第 4 个字符位置开始取 xff0c 直到结束 mysql gt select substring 39 example com 39 4 43 43 substrin

  • 论文记录：图像描述技术综述

    文章目录 前言 一 什么是image caption xff1f 二 基于深度学习的图像描述方法 1 基于编码器 解码器的方法 2 基于注意力机制的方法 3 基于生成对抗网络的方法 4 基于强化学习的方法 5 基于密集描述的方法 总结 前言

  • 一个接口有多个实现类

    如果一个接口有多个实现类 xff0c 在Controller层注入后调用 xff0c 怎么知道调用的是接口的哪个方法呢 xff1f 经过一番测试 和查找资料 终于找到了结果 2 0一个接口对应多个实现类 一个接口对应对个实现类 xff0c

  • c/c++使用libcurl库做http客户端及封装(HTTP_GET和HTTP_POST)

    由于项目需求需要发送http post去请求数据 xff0c 所以上网去寻找了一些发送http请求的方法 xff0c 发现libcurl较为常用 xff0c 然后根据官网上的例子 xff0c 对libcurl做了一些简单的封装 xff0c

  • （医学三维重建）MATLAB体绘制算法：多层面重建（MPR）

    xff08 医学三维重建 xff09 MATLAB体绘制算法 xff1a 多层面重建 xff08 MPR xff09 算法原理代码实现测试结果其他 by HPC ZY 算法原理 体绘制中比较特殊的一种 xff0c 因为它的输出是各种切面 就

  • Qt各个类之间继承关系

  • QGC -- 配置相机参数数据流说明（1）

    一 相关配置文件及对应画面 1 界面GeneralSettings qml 2 Video SettingsGroup json对应界面如下 xff1a span class token punctuation span span clas

  • ubuntu18.04 Intel Realsense T265与Realsense D435i 使用教程

    主要包括 xff1a realsense sdk驱动安装与ros包安装编译D435i与t256相机使用多个相机联合使用 官网链接 xff1a https github com IntelRealSense realsense roshttp

  • 2023年第八届团队程序设计天梯赛选拔校赛（三）题解

    文章目录 7 1 认识时钟7 2 修剪灌木7 3 求和运算7 4 合并数组7 5 骰子游戏7 6 字符串最大跨距7 7 上台阶7 8 A B7 9 括号匹配7 10 列出连通集7 12 哲哲打游戏7 13 喊山 标号标题分数提交通过率7 1

  • 学习挖掘机和程序员哪个好

    guanghuacheng guanghuacheng 等 级 xff1a 结帖率 xff1a 0 00 楼主发表于 xff1a 2011 04 14 16 57 13 快要高考了 学习成绩一般 不想上了 家里让去学挖掘机 我不想去 要想培

  • 我的2014作的一手好死，2015求轻虐

    真的好想上来开头就写 新的一年 xff0c 全新的自己 xff0c 但是这样自欺欺人的话我还是别说了 xff0c 省得一大批损友又来吐嘈我 2015年希望找到自己的另一半这样的话我也不想再提了 xff0c 因为这样写了两年 依旧单身 xff

  • 织梦后台登陆不上提示验证码不正确

    1 密码明明正确的 xff0c 却无法登陆后台管理 解答 xff1a 此外 xff0c 不管是新人 xff0c 还是phper xff0c 都要注意的是 xff1a 用户名和密码只能由 a z A Z 64 这些字符组成 xff0c 不能是

  • 浅谈视觉与语言中的多模态研究，究竟都研究什么

    前言 随着人工智能的整体进步 xff0c 计算机视觉和自然语言处理已经有了巨大的 有了如此强大的算法和自主系统的综合能力 xff0c 就需要合并知识领域 xff0c 实现跨模态兼容 xff0c 视觉语言 VisLang 研究具有更复杂的任务

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

    原文地址 xff1a http www zhangxinxu com wordpress p 61 56 前言 目前中文网站上面的文字 xff0c 就我的个人感觉而言 xff0c 绝大多数网站的主流文字大小为12px xff0c 因为在目前

热门标签