checkbox 在chrome 和 firefox中 间距是由margin撑开, IE中则是由padding,并且无法设置边框;
 

主要参考大神的博客,http://www.zhangxinxu.com/wordpress/2009/08/%E5%A4%8D%E9%80%89%E6%A1%86%E6%88%96%E5%8D%95%E9%80%89%E6%A1%86%E4%B8%8E%E6%96%87%E5%AD%97%E5%AF%B9%E9%BD%90%E7%9A%84%E9%97%AE%E9%A2%98%E7%9A%84%E6%B7%B1%E5%85%A5%E7%A0%94%E7%A9%B6%E4%B8%8E%E4%B8%80/

测试了一下效果,最后总结出:
方法从上到下按实现效果的程度排列,例方法一为最优选;
方法一:对任何大小的字体都有效
    首先复选框后面的文字字体须是”Tahoma”(可以称之为“她好吗”字体方便记忆),然后复选框的样式是.checkbox{vertical-align:middle; margin-top:0;}
    效果: chrome中显示居中,  IE10/9/8显示居中, IE11/7稍稍偏上1个像素

<div style="font-size: 16px; font-family: Tahoma;">
<input type="checkbox" style="vertical-align:middle; margin-top:0;" onchange="check()">不记住密码222
</div>
 
方法二:(对12px字体有效,其他字号大小请修改具体数值)
    给input[checkbox]设置 vertical-align:-2px;
    效果:IE/chrome 基本都能正常显示,可能会稍微偏上1个像素;
 
方法三:(对12px字体有效,其他字号大小请修改具体数值)
     给input[checkbox]设置 vertical-align:middle; margin-top:-2px; margin-bottom:1px;
    效果都还可以;
 
这也是一直会遇到的问题,只是对大神文章的梳理,以上3种方法为最新适用的,毕竟大神的文章是很久以前写的

checkbox与文字对齐方式(同样可用于radio单选框)的更多相关文章

  1. radio 和checkbox与文字对齐问题

    今天在项目中遇到radio和文字对齐问题(ie不明显,火狐和google比较明显),在此记录. 1.浏览器默认文字大小为14px,因而当文字字体为14px时radio和checkbox与文字对齐良好, ...

  2. [Swift通天遁地]二、表格表单-(12)设置表单文字对齐方式以及自适应高度的文本区域TextArea

    ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...

  3. C# Excel 中设置文字对齐方式、方向和换行

    在Excel表格中输入文字时,我们常常需要调整文字对齐方式或者对文字进行换行.本文将介绍如何通过编程的方式设置文字对齐方式,改变文字方向以及对文字进行换行. //创建Workbook对象 Workbo ...

  4. checkbox与文字对齐

    checkbox和后面的文字如果不加样式,会导致checkbox和文字对齐,解决办法是对checkbox和文字同时添加如下样式: vertical-align:middle;

  5. 纯css3简单实用的checkbox复选框和radio单选框

    昨天为大家分享了一款很炫的checkbox复选框和radio单选框,今天再给大家带来一款简单实用的checkbox复选框和radio单选框.界面清淅.舒服.先给大家来张效果图: 在线预览   源码下载 ...

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

    之前为大家分享了好多css3实现的按钮.今天要为大家分享的是纯css3实现的checkbox复选框和radio单选框,效果超级炫.先让我们看看图吧! 在线预览   源码下载 这个实例完全由css3实现 ...

  7. [WPF打印]WPF 文档元素(Run TextBlock Paragraph)的文字对齐方式

    最近开发WPF程序,需要打印,用到了FlowDocument(这相当于有了打印模版,而且可以随时修改,真的是挺方便的).可是在输出表格形数据(这种情况恐怕是大多数~)时遇到了点儿麻烦. 由于Table ...

  8. radio(单选框)/checkbox(复选框) 美化

    由于某种原因,可能需要对单选框(radio)或复选框(checkbox)进行美化,那么直接修改样式是行不通,要实现就需要添加js,以下js依赖于jquery radio.js: function ra ...

  9. vertical-align:middle;一般用于img和行内文字对齐方式

    vertical-align:top ;文字和行内块元素的顶部对齐 vertical-align:middle;居中 vertical-align:bottom;底对齐

随机推荐

  1. 【BZOJ4008】【HNOI2015】亚瑟王 [期望DP]

    亚瑟王 Time Limit: 20 Sec  Memory Limit: 512 MB[Submit][Status][Discuss] Description 小 K 不慎被 LL 邪教洗脑了,洗 ...

  2. POJ 1062 昂贵的聘礼 (最短路 迪杰斯特拉 )

    题目链接 Description 年轻的探险家来到了一个印第安部落里.在那里他和酋长的女儿相爱了,于是便向酋长去求亲.酋长要他用10000个金币作为聘礼才答应把女儿嫁给他.探险家拿不出这么多金币,便请 ...

  3. [bzoj2594][Wc2006]水管局长数据加强版——lct+离线

    Brief Description 您有一个无向带权图,您需要支持两种操作. 询问两个点之间的最大权最小路径. 删除一条边. Algorithm Design 我们首先提出一个猜想:最优路径一定在原图 ...

  4. Linux curl命令【curl】

    命令:curl 在Linux中curl是一个利用URL规则在命令行下工作的文件传输工具,可以说是一款很强大的http命令行工具.它支持文件的上传和下载,是综合传输工具,但按传统,习惯称url为下载工具 ...

  5. Codeforces 950E Data Center Maintenance 强连通分量

    题目链接 题意 有\(n\)个信息中心,每个信息中心都有自己的维护时间\((0\leq t\lt h)\),在这个时刻里面的信息不能被获得. 每个用户的数据都有两份备份,放在两个相异的信息中心(维护时 ...

  6. C++高精度

    整理了一下高精度,虽然可用java,但很多时候还是C++写的方便. 附上kuangbin神的高精度模板(HDU1134 求卡特兰数) #include <iostream> #includ ...

  7. Linux进程的Uninterruptible sleep(D)状态【转】

    转自:http://c20031776.blog.163.com/blog/static/68471625201121522824111/ 运行在KVM虚拟机里的一些进程突然出了问题,这些出了问题的进 ...

  8. Oracle rman 全备份的一个小例子

    run{  allocate channel d1 type disk;  backup database format='/u01/backup/%T_%d_%s.bak';  sql 'alter ...

  9. JVM垃圾收集规则和算法

    1.垃圾收集 Garbage Collection 程序计数器.虚拟机栈.本地方法栈这三部分内存随着线程生而生,随着线程灭而自然的回收,他们的大小在编译期间就大致确定了下来,所以对这部分的回收是具备确 ...

  10. private,public,protected 的作用

    public  修饰的变量和函数可以在类的内部和外部都可以访问 protected   修饰的变量和函数只可以在类的内部访问,如果该类派生出子类,那么在子类中该变量和函数也可以使用 private   ...