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

栏目: 编程语言 发布于: 2014-05-12 08:48:07

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

您可能感兴趣的文章

  • Javascript解决左右高度自适应的问题
  • Mysql查询带单引号字符串及插入带单引号字符串需要注意问题
  • 网页载入过程中自动调整图片的宽度
  • 如何解决php中并发读写文件冲突的问题
  • iframe自适应高度的解决办法
  • Mysql的索引优化的一些常识性问题
  • 文本区域textarea框根据输入内容自适应高度
  • 解决linux服务器下js和css缓存的问题
本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。
转载请注明:文章转载自 [http://www.php230.com]
本文标题:彻底解决Button在IE6、7下的自适应宽度问题
IT技术书籍推荐:
Java编程思想(第4版)
Java编程思想(第4版)
埃史尔 (作者), 陈昊鹏 (译者)
《Java编程思想(第4版)》书共22章,包括操作符、控制执行流程、访问权限控制、复用类、多态、接口、通过异常处理错误、字符串、泛型、数组、容器深入研究、Iava’UO系统、枚举类型、并发以及图形化用户界面等内容。这些丰富的内容,包含了Java语言基础语法以及高级特性,适合各个层次的Java程序员阅读,同时也是高等院校讲授面向对象程序设计语言以及Java语言的绝佳教材和参考书。 从《Java编程思想(第4版)》一书获得的各项大奖以及来自世界各地的读者评论中,不难看出这是一本经典之作。本书的作者拥有多年教学经验,对c、c++以及Java语言都有独到、深入的见解,以通俗易懂及小而直接的示例解释了一个个晦涩抽象的概念。
最新互联网资讯