• 虾米煮粥   2014/11/22 8:42:00
  • 如何解决Button在IE6、7下无法自适应宽度问题的问题?
  • 关键字: 自适应宽度 IE6 兼容性 宽度自适应
  • 写一个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;


大家的回答
  • 还没有人回答这个问题哦,亲,快来帮帮TA吧
  •   我来回答
  • 注册用户登录后才能发表评论,请 登录注册
  • 请您注意

    ·自觉遵守:爱国、守法、自律、真实、文明的原则

    ·尊重网上道德,遵守《全国人大常委会关于维护互联网安全的决定》及中华人民共和国其他各项有关法律法规

    ·严禁发表危害国家安全,破坏民族团结、国家宗教政策和社会稳定,含侮辱、诽谤、教唆、淫秽等内容的作品

    ·承担一切因您的行为而直接或间接导致的民事或刑事法律责任

    ·您在编程中国社区新闻评论发表的作品,本网站有权在网站内保留、转载、引用或者删除

    ·参与本评论即表明您已经阅读并接受上述条款

  • 相关话题
  • 暂无相关话题哦