关注前端开发
关注用户体验

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

很早就遇到过这么个小问题,但由于其并未影响到实际作用和美观就没有正面解决它,现在,我们来试着解决它。

写一个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;

参考资料:http://jehiah.cz/a/button-width-in-ie

未经允许不得转载:大前端 » 解决Button在IE6、7下的自适应宽度问题
分享到:更多 ()

评论 32

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #21

    Button在IE6、7下的自适应宽度是什么意思?

    helin3年前 (2014-02-27)回复
    • 不同浏览器显示有兼容差异

      浩子3年前 (2014-03-06)回复
  2. #20

    终于找到了

    大少爷4年前 (2013-05-06)回复
  3. #19

    😆 见识了

    昔影4年前 (2013-04-26)回复
  4. #18

    overflow:visible; 的意义是什么,不是元素可见吗?是默认值为什么能解决这个原因是什么,求解

    4年前 (2013-01-28)回复
  5. #17

    这个宽度统一好实现,高度统一就比较慢烦了

    cloudyan4年前 (2012-11-30)回复
  6. #16

    很不错的文章,不过偶的方法不一样,用的盒子。

    html6game4年前 (2012-10-15)回复
  7. #15

    不错,受教了,用这个可以解决问题,谢谢 笑话大全 爆笑

    不错5年前 (2012-06-29)回复
  8. #14

    ie6简介就是恶梦

    FKBlog5年前 (2012-04-28)回复
  9. #13

    这样写出来的Button在不同浏览器中的宽度和高度不一样

    杀手5年前 (2012-03-28)回复
  10. #12

    这个是不是传说的中沙发!!!?

    感谢开放的网络5年前 (2012-02-14)回复
  11. #11

    浩子哥 我做了一个模板 这得感谢你的放出的D4模板 等我网站上线了 我把大前端放在我首页友情链接 :sad: 虽然现在网站还没上 :sad: 还是个新站

    感谢开放的网络5年前 (2012-02-14)回复
    • 呵呵,不错啊,好了说一声,我一定上去好好看看先

      浩子5年前 (2012-02-14)回复
  12. #10

    :mrgreen:

    看不出什么情况来5年前 (2012-01-31)回复
  13. #9

    😉 ! 顶起来!

    Maxling5年前 (2012-01-30)回复
  14. #8

    这bug还真没注意过。

    wmtimes5年前 (2012-01-21)回复
  15. #7

    不错不错,受教了

    胡小易5年前 (2012-01-19)回复
  16. #6

    ➡ ➡ ➡ ➡ ➡ ➡ 学习了~~~~

    聆心5年前 (2012-01-13)回复
  17. #5

    学习了啊,和你一样,一直没有正视这个问题。

    网站模板5年前 (2012-01-13)回复
  18. #4

    而且css没有最佳的解决方法 ,只有最适合的解决方式

    haha1685年前 (2012-01-12)回复
  19. #3

    我个人觉得你就很2,button加宽度和高度在各个浏览器下显示的效果是不一样的,你没发现你写出的按钮在不同浏览器下显示的长度和高度是不一样的么?

    haha1685年前 (2012-01-12)回复
  20. #2

    貌似很多网站已经摒弃了IE6的支持,奈何天朝的人民伤不起啊

    电影音乐下载5年前 (2012-01-11)回复
  21. #1

    这个是不是传说的中沙发!!!?

    电影音乐下载5年前 (2012-01-11)回复

themebetter 国内更好的WordPress主题服务商

立即前往