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

love3400wind的blog

like

 
 
 

日志

 
 
 
 

input/button里文字引发的间距增加  

2009-10-19 17:53:59|  分类: IT |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

IE下的按钮组件(input、button)会随着文字的增加导致文本距离按钮左右两侧的间距越来越大。该问题存在于IE6/IE7,FF、IE8 Beta以及Opera 9没发现类似问题。这个问题在大量使用系统默认按钮,或者只是设置按钮背景平铺的,同时按钮不设定固定宽度要配合文字自适应的开发环境下,很是困扰开发人员。我遇到过得情况就是在一个有限的界面框里要并排几个按钮,但按钮又不能定义固定宽度,最终效果在Firefox、Opera下一切正常,到了IE下就惨不忍睹,按钮折行显示得乱七八糟

普通情况下,针对 IE6 给按钮元素设置 overflow 属性的 visible 值(注 :padding 值仅在设置了overflow:visible 属性后才有效)。

另种情况,如果将按钮写在表格单元td里,虽然按钮可以显示正常,但还是会有类似不正常时候的宽度占据着td标签,视觉上看就是td空了一大块。如果开发者不知情的话,很有可能会误认是表格或者td宽度的问题,从而完全搞错问题根源。解决办法就是设置按钮的宽度“width:0”,但IE7也存在类似BUG,而据网上信息显示目前还没有比较好的办法解决。

备注:我在IE8 Beta版下测试貌似没有这个问题,由此推测IE8正式版应该会修正这个BUG。

最终方案:

.button{

overflov:visible;

padding:0 0.5px;

width:auto;/*FF识别的属性
       _width:0px/*IE6识别的属性*/

}

  评论这张
 
阅读(1389)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

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

页脚

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