不仅不同浏览器不同,不同的字体,不同的文字大小也会表现不一样。

重置 form checkbox & radio

  因为不同浏览器解析不一样,有些是默认margin,有些是默认padding,还有ie6,7连margin和padding即使设置为0后,所占的空间还是比较大,所以还是有必须重置下,这样就能解决很多不必要的麻烦。

以下是 14px Arial 字体的解决方案:

1、css代码

.form { font: 14px/18px Arial, Helvetica, sans-serif; }
.form input, .form label { vertical-align: middle; }
.form label { margin-right: 6px; }
.form_checkbox, .form_radio {
margin: 0 3px 0 0;/*与右侧文字的间距*/
padding:;
width: 13px;
height: 13px;
/*ie7 ie6 根据不同的 font-size 设置不同的值*/
*vertical-align: 1px;
}

2、html代码

<form name="form1" method="post" action="" class="form">
<p>
<input type="checkbox" name="checkbox4" id="checkbox4" class="form_checkbox">
<label for="checkbox4">checkbox4</label>
<input type="checkbox" name="checkbox5" id="checkbox5" class="form_checkbox">
<label for="checkbox5">checkbox5</label>
<input type="checkbox" name="checkbox6" id="checkbox6" class="form_checkbox">
<label for="checkbox6">checkbox6</label>
</p>
<p>
<input type="radio" name="radio" id="radio4" value="radio4" class="form_radio">
<label for="radio4">radio4</label>
<input type="radio" name="radio" id="radio5" value="radio5" class="form_radio">
<label for="radio5">radio5</label>
<input type="radio" name="radio" id="radio6" value="radio6" class="form_radio">
<label for="radio6">radio6</label>
</p>
</form>

3、效果图

checkbox & radio 的对齐问题的更多相关文章

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

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

  2. jquery的checkbox,radio,select等方法总结

    jquery的checkbox,radio,和select是jquery操作的一个难点和重点,很多前端新手对其了解不是很透彻.时间久了不用,我在写的时候有时也难免对某些操作支支吾吾,记不清楚,现在,对 ...

  3. jquery 获取和设置 checkbox radio 和 select option的值?

    ============== 获取和设置 checkbox radio 和 select的值? === val()函数, 其名字就表达了 它的意思: 他就是= value 的简写! val就是valu ...

  4. checkbox radio select绑定

    index11.html <html><head> <title>checkbox radio select绑定</title> <script ...

  5. 自定义checkbox/radio

    一. label标签 1. 概念: HTML <label>元素表示用户界面中项目的标题.它通常关联一个控件,或者是将控件放置在label元素内,或者是用作其属性.这样的控制称作label ...

  6. 【js】操作checkbox radio 的操作总结

    摘要 总是忘记checkbox radio 的具体操作,总是坑自己,总结下记下来 html <input type="checkbox" value="1" ...

  7. jquery checkbox radio 标签 选中的3种方法

    张映 发表于 2013-07-16 分类目录: js/jquery 标签:checkbox, jquery, radio, 选中 jquery 很灵活,checkbox radio标签选中的方法有很多 ...

  8. 微信小程序 修改(自定义) 单选/复选按钮样式 checkbox/radio样式自定义

    参考文章: 微信小程序 修改(自定义) 单选/复选按钮样式 checkbox/radio样式自定义

  9. struts2学习笔记之表单标签的详解:s:checkbox/radio/select/optiontransferselect/doubleselect/combobox

    struts2中的表单标签都是以s标签的方式定义的,同时,struts2为所有标签都提供了一个模板,C:\Users\180172\Desktop\struts2-core-2.2.1.1.jar\t ...

随机推荐

  1. WPF入门教程系列十七——WPF中的数据绑定(三)

    四. XML数据绑定 这次我们来学习新的绑定知识,XML数据绑定.XmlDataProvider 用来绑定 XML 数据,该XML数据可以是嵌入.Xmal文件的 XmlDataProvider 标记中 ...

  2. 设置 iOS 应用的图标和名称

    Xcode 8.1 设置 iOS 应用的图标和名称的方法: 设置应用图标: 1.在 Resources 中添加图片: 2.在 Icon file 的属性值填写图标文件的名称. 设置应用名: 1.修改 ...

  3. ClickOnce部署(1):一些发布方式

    ClickOnce是什么玩意儿,这个问题嘛,在21世纪的互联网严重发达的时代,估计也没有必要大费奏章去介绍了,弄不好的话,还有抄袭之嫌.因此,有关ClickOnce的介绍,各位朋友可以直接查找MSDN ...

  4. 深入理解DOM节点类型第四篇——文档片段节点DocumentFragment

    × 目录 [1]特征 [2]作用 前面的话 在所有节点类型中,只有文档片段节点DocumentFragment在文档中没有对应的标记.DOM规定文档片段(document fragment)是一种“轻 ...

  5. IOS 开发中要注意的事项

    1.关于拍摄 TGCameraViewController – 基于 AVFoundation 的自定义相机.样式漂亮,轻量并且可以很容易地集成到 iOS 项目中.不会内存吃紧 2.block 中对控 ...

  6. Spring学习笔记--环境搭建和初步理解IOC

    Spring框架是一个轻量级的框架,不依赖容器就能够运行,像重量级的框架EJB框架就必须运行在JBoss等支持EJB的容器中,核心思想是IOC,AOP,Spring能够协同Struts,hiberna ...

  7. JS函数相关及递归函数的使用

    JS函数相关及递归函数的使用 通用js程序: function 函数名(参数列表) { 函数体 } 可使用alert()输出,也可用return返回值. alert与return区别: functio ...

  8. AD域登录验证

    AD域登录验证 作者:Grey 原文地址:http://www.cnblogs.com/greyzeng/p/5799699.html 需求 系统在登录的时候,需要根据用户名和密码验证连接域服务器进行 ...

  9. HTML label标签的一点理解

    label标签为input元素定义标注. label元素不呈现任何特殊效果.不过他为鼠标用户改进了可用性.如果你在label元素内点击文本就会触发此控件.就是说当用户选择该标签是,浏览器就会自动的将焦 ...

  10. Windows 10 内置管理员无法打开Metro应用方法

    前言 在windows 10中,由于权限原因,使用了内置管理员账户.虽然这样权限获取了,但是不能打开Metro应用,Microsoft Edge浏览器等,有点不太好.那有没有方法可以修改呢?这是本文要 ...