彻底解决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技术书籍推荐:
JavaScript高级程序设计(第3版)
JavaScript高级程序设计(第3版)
泽卡斯 (Zakas. Nicholas C.) (作者), 李松峰 (译者), 曹力 (译者)
《JavaScript高级程序设计(第3版)》是JavaScript超级畅销书的最新版。ECMAScript 5和HTML5在标准之争中双双胜出,使大量专有实现和客户端扩展正式进入规范,同时也为JavaScript增添了很多适应未来发展的新特性。《JavaScript高级程序设计(第3版)》这一版除增加5章全新内容外,其他章节也有较大幅度的增补和修订,新内容篇幅约占三分之一。全书从JavaScript语言实现的各个组成部分——语言核心、DOM、BOM、事件模型讲起,深入浅出地探讨了面向对象编程、Ajax与Comet服务器端通信,HTML5表单、媒体、Canvas(包括WebGL)及Web Workers、地理定位、跨文档传递消息、客户端存储(包括IndexedDB)等新API,还介绍了离线应用和与维护、性能、部署相关的最佳开发实践。《JavaScript高级程序设计(第3版)》附录展望了未来的API和ECMAScript Harmony规范。
最新互联网资讯