注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

谈笑涧

已开通独立前端博客,请访问 http://www.candoudou.com

 
 
 

日志

 
 

【转载】checkbox复选框的研究  

2012-11-27 10:03:28|  分类: div+css |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
本文转载自食草狼《checkbox复选框的研究》
一、为什么复选框与后面的文字有间距
checkbox复选框的研究 - 食草狼 - 没办法主动添加好友了
1.在FF,chrome,Safari等浏览器,是由margin引起的,也就是checkbox有默认margin-right:3px。(FF下复选框默认margin值为3px 3px 3px 4px,chrome与之一致 )
2.IE6-IE8是由本身引起的。
checkbox复选框的研究 - 食草狼 - 没办法主动添加好友了
 
checkbox复选框的研究 - 食草狼 - 没办法主动添加好友了
checkbox复选框的研究 - 食草狼 - 没办法主动添加好友了

 FF的虚框直接依附在复选框本身的边框上,IE6是偌大的区域,复选框只是位居其中,IE8下虚框的范围更加对称。

checkbox复选框的研究 - 食草狼 - 没办法主动添加好友了
 
给复选框加border和background,IE6下如图,IE7类似,IE8更对称些,FF下无反应。由此IE浏览器下我们看到的复选框只是真实复选框的一部分,真正的复选框是边框及背景色充斥的整个部分。

由于复选框本身的差异,造成IE及其他浏览器复选框对CSS的反应不同。IE浏览器下复选框对width、height、border、background等敏感,而margin :0一点反应都没有,FF、chrome等浏览器border、background无效果,FF对width、height无反应(本身大小不变,但位置会变),但FF对margin :0反应强烈,会使复选框后面的文字紧贴复选框。
二、单复选框与文字对齐问题
1.产生的条件
14像素左右大小的字体与复选框没有对齐的问题,而12px,文字位置一般会偏下
2.解决方案
下面我将提供五种解决方案,有三个方案没有使用任何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浏览器示例):
checkbox复选框的研究 - 食草狼 - 没办法主动添加好友了
 
checkbox复选框的研究 - 食草狼 - 没办法主动添加好友了
 2.以vertical-align:text-top为基础的
css代码如下:height:13px; vertical-align:text-top; margin-top:0;
结果如下图(以IE7浏览器和chrome浏览器截图示例):
checkbox复选框的研究 - 食草狼 - 没办法主动添加好友了
 
checkbox复选框的研究 - 食草狼 - 没办法主动添加好友了
 3.以vertical-align:bottom为基础的
css代码如下:height:15px; vertical-align:bottom; margin-bottom:3px; margin-top:-1px;
结果如下图(以IE6和Firefox浏览器截图做示例):
checkbox复选框的研究 - 食草狼 - 没办法主动添加好友了
 
checkbox复选框的研究 - 食草狼 - 没办法主动添加好友了
 4.以vertical-align:top为基础的
css代码如下:height:14px; vertical-align:top;
结果如下图(chrome下文字略微偏上,其他浏览器下很完美,以IE7和chrome浏览器示例):
checkbox复选框的研究 - 食草狼 - 没办法主动添加好友了
 
checkbox复选框的研究 - 食草狼 - 没办法主动添加好友了
 5.以vertical-align:middle为基础的
css代码如下:vertical-align:middle; margin-top:-2px; margin-bottom:1px;
结果如下截图(以IE6和Firefox示例):
checkbox复选框的研究 - 食草狼 - 没办法主动添加好友了
 
checkbox复选框的研究 - 食草狼 - 没办法主动添加好友了
 

方案3和方案5从兼容性,代码的利用率,css的消耗等来讲都是我非常推荐的两种方法。
作者补充于11月3号凌晨2:40,曾在人人网的css代码中看到使用vertialc-align:-3px解决此问题,我试过,虽然表现不能用完美形容,但确实缓解了对齐的问题,是个性价比非常高的方法。我是建议您试试的。
  补充方案6.以字体为基础的
首先复选框后面的文字字体须是”Tahoma”(可以称之为“她好吗”字体方便记忆),然后复选框的样式是.checkbox{vertical-align:middle; margin-top:0;}
  评论这张
 
阅读(231)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017