PHP群:95885625 Hbuilder+MUI群:81989597 站长QQ:634381967
    您现在的位置: 首页 > 开发编程 > HTML+CSS > 正文

    彻底解决Button在IE6、IE7下的自适应宽度问题

    作者:admin来源:B5教程网浏览:时间:2020-09-30 00:07:50我要评论
    导读:Button的宽度在IE6、7下总是不能完美,接下来我们演示一个普通的Button,你可以用IE6或者IE7浏览器看看其显示宽度,然后对比Chrome或者IE8
    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;

    转载请注明(B5教程网)原文链接:https://b5.mxunkeji.com/content-70-74-1.html
    相关热词搜索: 自适应宽度 Button