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

谈笑涧

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

 
 
 

日志

 
 

input和select在各种浏览器下对不齐的解决方案  

2012-02-24 16:44:11|  分类: div+css |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
input 标记的对齐问题一直是心中的痛啊,各种hack 各种调试 最后还是不能对齐有木有啊!
现在和大家分享下如何解决这些恼人的东西!

1. 单选、多选框 在各个浏览器下面总是有那么一点点错位
2. 按钮的文字不能垂直局中

各种对不齐,看着心里很不爽有木有啊!亲~

好吧,下面提供解决方案啦! 

1. 解决单选,多选框不局中的问题 我们可以使用 vertical-align 解决,但是不是直接给 middle, top, bottom 这一类的默认值,而是直接给指定的值比如:vertical-align:-4px,具体就自己根据行高或者字体大小调整值,IE6/7可能有一点小区别 那么 *vertical-align:-3px  hack一下  其它浏览器都是一致的。这样就很方便了。
示例代码:


<style>
#iqianduan{vertical-align:-4px; *vertical-align:-3px;}
</style>
<input type="checkbox" id="iqianduan"><label for="iqianduan">爱前端测试</label>


2. 按钮文字局中问题解决方法:
当然默认按钮这里我也没有好的解决办法,项目中用到的很多都是带样式的按钮。这种就可以很好的解决文字局中问题那就是用 a 标记
把所有的样式代码写到a标记上,包括按钮的鼠标经过,鼠标按下样式 a标记
同时去掉按钮的边框及背景  设置按钮的宽高与a标记相同
示例代码:

<style>
.form-btn32-wrap{background:url(../images/btn-spr.png) repeat-x; border-color:#6B9F11 #54850A #386601; border-width:1px; border-style:solid; display:inline-block;height:30px; width:100px;}
.form-btn32-wrap:hover{background-position:0 -32px;}
.form-btn32-wrap:active{background-position:0 -64px;}
.form-btn32{border:none; background:transparent;font:400 14px/25px "microsoft yahei"; color:#FFF; height:30px; width:100px; cursor:pointer;}
</style>
<a href="javascript:;" class="form-btn32-wrap">
<input type="submit" class="form-btn32" value="注册爱前端"/>
</a>

经过调整后就对齐啦~

这些都是一些小技巧,希望对大家有用~  
  评论这张
 
阅读(719)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

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

页脚

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