很早就遇到过这么个小问题,但由于其并未影响到实际作用和美观就没有正面解决它,现在,我们来试着解决它。

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

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的写法很二,所以摒弃之。

解决Button在IE6、7下的自适应宽度问题的更多相关文章

  1. 漂亮的自适应宽度的多色彩CSS图片按钮

    一.素材               二.效果 三.CSS *{padding:0;margin:0} /*----------------------------------- 自适应宽度图片按钮 ...

  2. IE6/IE7下margin-bottom失效兼容解决办法及双倍边距问题

    (从已经死了一次又一次终于挂掉的百度空间人工抢救出来的,发表日期 2014-04-08) 一.IE6/IE7下margin-bottom失效兼容解决办法 1.用padding-bottom代替:2.在 ...

  3. opacity在IE6~8下无效果,解决的办法

    opacity在IE6~8下无效果,解决的办法 问题出现时rgba()在ie6下不出效果,最后查到是opacity的问题. opacity是css3时出现的,目前主流浏览器都支持.but老IE是个麻烦 ...

  4. IE6条件下的bug与常见的bug及其解决方法

    1.IE6条件下有双倍的margin 解决办法:给这个浮动元素增加display:inline属性 2. 图片底部有3像素问题 解决办法:display:block;或者vertical-align: ...

  5. 一句white-space:nowrap解决IE6,IE7下浮动元素不自动换行

    一句white-space:nowrap解决IE6,IE7下浮动元素不自动换行

  6. 空a标签 a标签空的情况下 IE6 IE7下点击无效

    最近做了好多网站专题页面,因为专题页面图片较多,个别banner上有1个到多个按钮,一种是用“图解img标签的usemap”的方法做链接,(图解img标签的usemap使用方法)[传送门] 另一种用则 ...

  7. IE6 7下常见CSS兼容性处理

    以下是一些比较常见的IE6 7下的兼容性问题. 在当下这个时代,其实我们几乎可以不用再去针对IE6做兼容性的处理,除非你的公司还是诡异的要求你兼容到IE6.但是了解一些常见的兼容性问题还是可以帮助我们 ...

  8. ie6,7下js动态加载图片不显示错误

    ie6,7下js动态加载图片不显示错误 先描述一下出现这种匪夷所思bug的背景: 我在页面加载的时候加载一堆小缩略图,<a href="javascript:void(0);" ...

  9. ie6,7下的textarea的type获取

    <input type='button' value="按钮" class='gys'> <textarea class='gys gystextarea'> ...

随机推荐

  1. C++程序设计实践指导1.7超长数列中n个数排序改写要求实现

    改写要求1:将以上程序改写为适合超长整数 改写要求2:将以上程序改写为适合超长数列 改写要求3:将数列中指定位置m开始的n个结点重新按降序排序 改写要求4:输出指定位置m开始的n个结点的超长整数 #i ...

  2. 使用SQLiteHelper创建数据库并插入数据

    参考<疯狂android讲义>8.4节P424 1.获取SQLiteDatabase实例有2种方法,一是直接new SQLiteDatabase(),另一种使用SQLiteHelper.一 ...

  3. Spring:启动项目时加载数据库数据(总结)

    在项目中需要启动程序时,要将数据库的用户信息表加载到内存中,找到一下几种方式. 1.实现ApplicationListener接口,重写onApplicationEvent方法,可以在项目启动的时候执 ...

  4. inline 间距

    今天看了内联元素的间距: http://blog.csdn.net/hedong37518585/article/details/6657853

  5. Chapter 02:复合 VS 继承

    复合优先于继承,继承是实现代码重用的有力手段,并不是所有情况都适用,使用不当会导致软件变得很脆弱.与方法调用不同的是,继承打破了封装性. 总而言之,组合和继承,都能实现对类的扩展.但是要分具体情况用哪 ...

  6. 匈牙利算法(素数伴侣(HW1112))

    #define _CRT_SECURE_NO_WARNINGS #include<iostream> #include<vector> #include<string&g ...

  7. python操作redis-set

    #!/usr/bin/python #!coding: utf-8 import redis if __name__=="__main__": try: conn=redis.St ...

  8. 正式学习React( 三)

    最基本的jsx语法什么的,我就不介绍了,唯一觉得有用点的,就是声明周期了. 下面的内容是转来的,自己也可以网上去搜,我觉得别人归纳的挺不错的,不过写法可能不是es6的,不影响学习. 在组件的整个生命周 ...

  9. SqlServer中代理作业实现总结

    今天弄SqlServer代理作业,弄了半天,把遇到的问题总结出来,主要是抨击一下Sql Server的Express版本.好了,看下面的正题. 首先,需要安装Sql Server Agent服务,该服 ...

  10. 21副GIF动图让你了解各种数学概念(转。太强大了)

    “让我们面对它:总的来说数学是不容易的,但当你征服了问题,并达到新的理解高度,这就是它给你的回报.” ——Danica McKellar 数学是很难的科学,但因为它是科学家用数学来解释宇宙的语言,我们 ...