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

解决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

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

评论 48

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

    Wonderful blog! I found it while surfing around on Yahoo News.

    Do you have any suggestions on how to get listed in Yahoo News?
    I’ve been trying for a while but I never seem to get there!
    Appreciate it

  2. #36

    Excellent! I thank you your contribution to this matter. It has been insightful. my blog: palm reading guide

    Santo Hipple1个月前 (05-13)回复
  3. #35

    I would like to get more information on this topic. Can you help me with the same.

    Nonton Anime2个月前 (05-10)回复
  4. #34

    Some truly nice stuff on this website , I like it.

    cat2个月前 (05-08)回复
  5. #33

    Helklo there, I elieve your blog might be
    having web browser compatibility issues. Whhen I look att your blog in Safari, it looks fine however
    when opening in IE, it’s ggot some overlapping issues.
    I simply wanted to give you a quick heads up! Aart from that,
    great site!

    best bitcoin casino2个月前 (04-24)回复
  6. #32

    I simply had to say thanks yet again. I do not know the things I would have made to happen in the absence of those ways contributed by you relating to such a theme. It previously was a real terrifying circumstance in my circumstances, but noticing your specialized fashion you processed the issue forced me to jump with gladness. I’m happy for your information and then believe you comprehend what a powerful job that you’re getting into educating some other people through the use of a web site. I know that you have never come across any of us.

    schoonheidssalon2个月前 (04-17)回复
  7. #31

    Thanks for this nice post. …

    Anti aging2个月前 (04-15)回复
  8. #30

    Thanks for the good writeup. It in reality was once a entertainment account it.
    Look advanced to far added agreeable from you! However, how could we
    keep in touch?

    ignition poker2个月前 (04-14)回复
  9. #29

    Hi! Someone in my Facebook group shared this site with us so I came
    to look it over. I’m definitely loving the information. I’m book-marking and will be tweeting
    this to my followers! Fantastic blog and brilliant style and design.

    shared Proxies2个月前 (04-13)回复
  10. #28

    Amazing! Its truly amazing article, I have got muuch clear idea concerning from this piece of writing.

    bovadasuperbowl3个月前 (04-11)回复
  11. #27

    Hi there, I enoy reading through your article.
    I wanted to write a little comment to support you.

    slotslv casino3个月前 (04-11)回复
  12. #26

    An interesting discussion is worth comment. I believe that you must write extra on this topic, it may not be a taboo subject but generally people are not sufficient to talk on such topics. To the next. Cheers

    my singing monsters3个月前 (03-28)回复
  13. #25

    Thanks on youjr marvelous posting! I genuinely enjoyed reading it,
    yyou could be a great author.I will be sure tto bookmark
    your blog annd will eventually come baqck
    at some point. I want to encourage one to continue your grewat job,
    have a nice afternoon!

  14. #24

    If you wish for to obtain much from this paragraph then you have
    to aply such methods to your won website.

    Veda3个月前 (03-13)回复
  15. #23

    I’m extremely inspired together with your
    writing skills and alsdo with tthe structure in your blog.Is this a paid
    topic or did you modify itt yourself? Either way stay up the excellent high quality writing, it’s uncommon to see a great weblog like this one
    today..

    Graciela4个月前 (03-13)回复
  16. #22

    I am typically to blogging and i actually appreciate your articles. This great article has really peaks my interest. My goal is to bookmark your site and keep checking achievable data.

    Tracy Archbell4个月前 (03-11)回复
  17. #21

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

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

      浩子5年前 (2014-03-06)回复
  18. #20

    终于找到了

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

    😆 见识了

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

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

    6年前 (2013-01-28)回复
  21. #17

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

    cloudyan7年前 (2012-11-30)回复
  22. #16

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

    html6game7年前 (2012-10-15)回复
  23. #15

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

    不错7年前 (2012-06-29)回复
  24. #14

    ie6简介就是恶梦

    FKBlog7年前 (2012-04-28)回复
  25. #13

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

    杀手7年前 (2012-03-28)回复
  26. #12

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

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

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

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

      浩子7年前 (2012-02-14)回复
  28. #10

    :mrgreen:

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

    😉 ! 顶起来!

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

    这bug还真没注意过。

    wmtimes8年前 (2012-01-21)回复
  31. #7

    不错不错,受教了

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

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

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

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

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

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

    haha1688年前 (2012-01-12)回复
  35. #3

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

    haha1688年前 (2012-01-12)回复
  36. #2

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

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

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

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

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

立即前往