您好,欢迎来到站长资源库!分享精神,快乐你我!
设为首页 | 收藏本站 | 网站地图 | Sitemap | TAG标签
焦点图全屏广告对联广告在线客服相册代码HTML/CSS滚动代码导航菜单悬浮漂浮
当前位置:首页 > 网页特效 > HTML/CSS

解决Button在IE6、7下的自适应宽度问题

浏览:38 次  |  日期:2020-02-21
很早就遇到过这么个小问题,但由于其并未影响到实际作用和美观就没有正面解决它,现在,我们来试着解决它。


写一个Button,有两种方式:其一,直接button标签;其二,input type=”button”。


不管哪种方式,Button的宽度在IE6、7下总是不能完美,接下来我们演示一个普通的Button,你可以用IE6或者IE7浏览器看看其显示宽度,然后对比Chrome或者IE8等浏览器,你会发现Bug的所在。


1、一个普通的Button:


可以很直接的看到Button的两边有空隙,当然,这个空隙是无法用padding:0来解决的。


通常,不少同学会想到给该Button定义一个width:100px。


2、width:150px的Button:



.demo-button01{width:150px;}




恭喜,你是对的。但是,我们必须这个Button自适应宽度呢?


好吧,加个width:auto试试。


3、width:auto的Button:


.demo-button02{width:auto;}



哦也,还是不行!下面试试网上提供的一种方法。


4、width:auto;overflow:visible;的Button:



.demo-button03{width:auto;overflow:visible;}

Yes,可行!还有一个方法如下:

.demo-button04{width:1;overflow:visible;}

但个人觉得width:1的写法很二,所以摒弃之。


结语:


如果你要问问什么IE6、7下会出现这样的问题,我说是微软很二。解决Button自适应宽度的最佳办法是width:auto;overflow:visible;


TAG标签
    2009-2020 © 懒人站长资源库  版权所有
    网站首页 - 矢量素材 - 图标素材 - 网页特效 - 图库素材 - 网站教程 - 网站源码 - FLASH素材 - 常用手册 - 共享软件
    QQ服务:564316500  邮箱服务:564316500@qq.com
    皖ICP备20003381号