‹‹ 上一主题 | 下一主题 ››
发新话题
打印

[讨论] 一个自适应宽度的兼容圆角按钮(input)效果

Sapily [楼主]

新手上路

帖子
46 
体力
8  
威望
0  
当前
广东 深圳
离线
14 天
1# 大 中 小 发表于 2008-8-6 14:17 
一个自适应宽度的按钮效果  有两个bug
1,当按钮只有1个字的时候,ff下可以,ie下不兼容
2,ie下焦点事件没包含上圆角

有高人帮解决一下不?
ptw: 为什么用<b>标签 因为我把他解释成 button <b> 呵呵  为节省点儿字节!

 提示：您可以先修改部分代码再运行
[ 本帖最后由 Sapily 于 2008-8-6 14:19 编辑 ]

TOP

jessenlon

初级会员

帖子
82 
体力
181  
威望
0  
当前
北京 西城区
离线
22 天

专长 网页设计,Flash,CG
2# 大 中 小 发表于 2008-8-6 14:29 
.btn input{border:none;margin:0 5px; padding-left: 20px;background:url() repeat-x left -30px;color:#FFFFFF;line-height:29px;font-weight:bold;height:29px;cursorointer;}


padding-left: 20px;加一句，给它让出点地来显示。。。。。。20px是随便写的。。。你根据图片自己看着改吧，或者改图片。。。

TOP

hutchin

蔚蓝的故乡

高级会员

帖子
1551 
体力
523  
威望
1  
当前
辽宁 沈阳
离线
1 天

专长 前端制作,PHP,MySQL
3# 大 中 小 发表于 2008-8-6 14:48 


 提示：您可以先修改部分代码再运行
只在ie6下通过

ff下需要改为
button div{float:right;height:13px;background:url(http://i.namipan.com/files/381d87baff1ab476a0c132d65cfb6e7c6bfbbdbab4070000a84b/0/btn-bg.gif) no-repeat right top;padding:8px 5px 8px 0;margin:-1px -3px 0 5px;color:#FFF}

[ 本帖最后由 hutchin 于 2008-8-6 14:58 编辑 ]
代码要像美女的裙子,越短越好

TOP

Sapily [楼主]

新手上路

帖子
46 
体力
8  
威望
0  
当前
广东 深圳
离线
14 天
4# 大 中 小 发表于 2008-8-6 15:21 

回复 hutchin 在 3# 的帖子

这个不错 除了需要加hack意外 还有用div感觉不好吧:

[ 本帖最后由 Sapily 于 2008-8-6 15:22 编辑 ]

TOP

还在为头像烦恼?还在为不能关注好友动态烦忧?快来蓝色理想家园吧!
‹‹ 上一主题 | 下一主题 ››
发新话题