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. 转:强化学习(Reinforcement Learning)

    机器学习算法大致可以分为三种: 1. 监督学习(如回归,分类) 2. 非监督学习(如聚类,降维) 3. 增强学习 什么是增强学习呢? 增强学习(reinforcementlearning, RL)又叫 ...

  2. thinkphp 随机获取一条数据

    $data=$AD->field("ID,Answer,State")->limit(1)->order('rand()')->select();

  3. [Leetcode Week10]Minimum Time Difference

    Minimum Time Difference 题解 原创文章,拒绝转载 题目来源:https://leetcode.com/problems/minimum-time-difference/desc ...

  4. selenium与360极速浏览器driver配置

    1)下载浏览器对应的driver,浏览器版本与driver对应关系,网址:http://www.cnblogs.com/JHblogs/p/7699951.html:driver下载地址:http:/ ...

  5. java对象内存大小评估

    Java对象的内存布局:对象头(Header).实例数据(Instance Data)和对齐填充(Padding).无论是32位还是64位的HotSpot,使用的都是8字节对齐.也就是说每个java对 ...

  6. intValue()的用法

    今天看到了Integer的这个方法,有点疑惑,查了下,做下笔记; 1.intValue()是java.lang.Number类的方法,Number是一个抽象类.Java中所有的数值类都继承它.也就是说 ...

  7. [ python3 ] 基于zabbix 自动抓取每天监控数据

    通过python登录到zabbix直接抓取每天的数据的图片趋势图,并制作成静态index.html给与展示并发送提示邮件. 操作系统:Centos6.7 python版本:python3.5 #!/u ...

  8. selenium 消息框元素定位处理

    以下内容来自于“风少”的博客 <元素定位:selenium消息框处理 (alert.confirm.prompt)> 基础普及 alert对话框 .细分三种,Alert,prompt,co ...

  9. eclipse启动几秒后报错 (一闪而过)

    eclipse启动报错,让查看.metadata/.log日志   1 !SESSION 2013-09-23 17:28:28.484 ------------------------------- ...

  10. Juel Getting Started

    Getting Started The JUEL distribution contains the following JAR files: juel-api-2.2.x.jar - contain ...