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. 25个常规方法优化你的jquery代码

    原文发布时间为:2011-06-06 -- 来源于本人的百度文章 [由搬家工具导入] http://www.tvidesign.co.uk/blog/improve-your-jquery-25-ex ...

  2. A trick in Exploit Dev

    学习Linux BOF的时候,看了这个文章,https://sploitfun.wordpress.com/2015/06/23/integer-overflow/ ,原文给出的exp无法成功, 此时 ...

  3. android usb adb流程[转]

    android adb 概述 android adb的代码分为两部分: kernel层的代码在如下路径: drivers/usb/gadget/f_adb.c drivers/usb/gadget/a ...

  4. appium===出错时截图的方法,自动截图

    try: driver.find_element_by_id("kwsss").send_keys("selenium") driver.find_elemen ...

  5. 重启nginx后丢失nginx.pid,如何重新启动nginx

    http://blog.csdn.net/llnara/article/details/8691049 一句话结论: /alidata/server/nginx/sbin/nginx -c /alid ...

  6. 移动开发之css3实现背景渐变效果

    前段时间由于手机项目需要实现一个背景渐变功能,  开始是想切个小背景图平铺下,  后来想到css3可以实现,如是用下面的代码就实现了. .sec_case_list li  span{ backgro ...

  7. WPF中使用WPFMediaKit视频截图案例

    前台 代码: <Window x:Class="WpfAppWPFMediaKit.MainWindow" xmlns="http://schemas.micros ...

  8. django 分页django-pure-pagination(zz)

    虽然django自带了一个paginator,但不是很方便,我们使用django-pure-pagination github地址https://github.com/jamespacileo/dja ...

  9. Linux API的fork()测试

    现在到docker的实施阶段, 其底层的namespace,cgroup应该深入了解了. 其调用的API也慢慢熟悉起来吧. #include <unistd.h> #include < ...

  10. python 模拟登陆园子

    主要用到了python cookielib,urllib2,urllib这3个模块,python 不亏是具有 先天做 爬虫的特质,废话多说直接上代码 #coding: utf- import sys ...