彻底解决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技术书籍推荐:
数据库技术丛书·MySQL技术内幕:InnoDB存储引擎(第2版)
数据库技术丛书·MySQL技术内幕:InnoDB存储引擎(第2版)
姜承尧 (David Jiang) (作者)
《MySQL技术内幕:InnoDB存储引擎(第2版)》由国内资深MySQL专家亲自执笔,国内外多位数据库专家联袂推荐。作为国内唯一一本关于InnoDB的专著,《MySQL技术内幕:InnoDB存储引擎(第2版)》的第1版广受好评,第2版不仅针对最新的MySQL 5.6对相关内容进行了全面的补充,还根据广大读者的反馈意见对第1版中存在的不足进行了完善,《MySQL技术内幕:InnoDB存储引擎(第2版)》大约重写了50%的内容。《MySQL技术内幕:InnoDB存储引擎(第2版)》从源代码的角度深度解析了InnoDB的体系结构、实现原理、工作机制,并给出了大量最佳实践,能帮助你系统而深入地掌握InnoDB,更重要的是,它能为你设计管理高性能、高可用的数据库系统提供绝佳的指导。 《MySQL技术内幕:InnoDB存储引擎(第2版)》一共10章,首先宏观地介绍了MySQL的体系结构和各种常见的存储引擎以及它们之间的比较;接着以InnoDB的内部实现为切入点,逐一详细讲解了InnoDB存储引擎内部的各个功能模块的实现原理,包括InnoDB存储引擎的体系结构、内存中的数据结构、基于InnoDB存储引擎的表和页的物理存储、索引与算法、文件、锁、事务、备份与恢复,以及InnoDB的性能调优等重要的知识;最后对InnoDB存储引擎源代码的编译和调试做了介绍,对大家阅读和理解InnoDB的源代码有重要的指导意义。 《MySQL技术内幕:InnoDB存储引擎(第2版)》适合所有希望构建和管理高性能、高可用性的MySQL数据库系统的开发者和DBA阅读。
最新互联网资讯