大家在写按钮（input、button）的时候会发现在 IE 下：
随着字数的增多，两边的间距也会越来越大。
在 WIN 的XP 风格下，当字数很多时，两边还会出现严重的锯齿。
到底是什么原因呢？
蓝色理想 原 WEB标准化专栏 的斑竹 zbm2001z 给出了一个答案：
1、IE 在按钮的 value 值每增加 4 个字节（汉字为 2 个）时，就会在按钮的两边产生总共一个字节的内边距宽度。
2、IE 的按钮（XP 风格）默认样式是一个固定尺寸的圆角矩形图片作背景，所以一旦按钮变宽变高后，这个固定尺寸的圆角矩形图片的边缘自然就会出现“拉毛”的现象了。
对于第二个问题我们暂时没办法去解决，除非 WIN 系统自己修复 BUG ，但对于第一个问题 ，我们还是可以修复的。
IE 下给按钮元素设置 overflow 属性的 visible 值（注 ：padding 值仅在设置了overflow:visible 属性后才有效），这个属性其实在上次写的《background-clip 与 background-origin 的一则运用》一文中已经使用。不过在今天阅读了《The stretched buttons problem in IE》后，发现原来还有一个小 BUG —— 如果将按钮置于表格单元格中，虽然按钮显示正确了，但是原先预留的宽度大小却没有改变，仍然占据着空间，需要在 IE6 中设置按钮的宽度（width）为 0（IE7同样也存在此 BUG，但暂时没有寻找到好的方式解决）。
最终的修复代码如下（Demo）：
input.button { padding: 0 .25em; width: auto; _width: 0; overflow:visible !ie;}
随着字数的增多，两边的间距也会越来越大。
在 WIN 的XP 风格下，当字数很多时，两边还会出现严重的锯齿。
到底是什么原因呢？
蓝色理想 原 WEB标准化专栏 的斑竹 zbm2001z 给出了一个答案：
1、IE 在按钮的 value 值每增加 4 个字节（汉字为 2 个）时，就会在按钮的两边产生总共一个字节的内边距宽度。
2、IE 的按钮（XP 风格）默认样式是一个固定尺寸的圆角矩形图片作背景，所以一旦按钮变宽变高后，这个固定尺寸的圆角矩形图片的边缘自然就会出现“拉毛”的现象了。
对于第二个问题我们暂时没办法去解决，除非 WIN 系统自己修复 BUG ，但对于第一个问题 ，我们还是可以修复的。
IE 下给按钮元素设置 overflow 属性的 visible 值（注 ：padding 值仅在设置了overflow:visible 属性后才有效），这个属性其实在上次写的《background-clip 与 background-origin 的一则运用》一文中已经使用。不过在今天阅读了《The stretched buttons problem in IE》后，发现原来还有一个小 BUG —— 如果将按钮置于表格单元格中，虽然按钮显示正确了，但是原先预留的宽度大小却没有改变，仍然占据着空间，需要在 IE6 中设置按钮的宽度（width）为 0（IE7同样也存在此 BUG，但暂时没有寻找到好的方式解决）。
最终的修复代码如下（Demo）：
input.button { padding: 0 .25em; width: auto; _width: 0; overflow:visible !ie;}
标签：
IE,,拉伸,BUG
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！
如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
暂无“按钮在IE中两边被拉伸的 BUG”评论...
更新动态
2024年11月01日
2024年11月01日
- 外媒：《死亡岛2》或是今年PS+2档最受欢迎游戏
- 群星.1997-世纪之歌第二辑6CD【宝丽金】【WAV+CUE】
- 邵萱.1997-是是非非【捷登】【WAV+CUE】
- 巫启贤.1998-我是你的【风格】【WAV+CUE】
- 【原神手游】「月草的赐慧」祈愿
- 【原神手游】「赤团开时」祈愿
- 【原神手游】「法器·千夜浮梦」介绍
- 陈立农《青春为名 上部曲 - 恋》[FLAC/分轨][290.58MB]
- 张乔西《明星》[320K/MP3][55.23MB]
- 张乔西《明星》[FLAC/分轨][143.08MB]
- 《P3R：Episode Aegis》：重复爬塔的悲伤
- 《公会传说：遗落的世界》EA版评测：怀旧感CRPG还在追我
- 诛仙老玩家会喜欢《诛仙世界》吗？
- ABC唱片-《母帶直刻神奇黑胶CD》[FLAC+CUE]
- 柏菲·李一凤《真爱过关》限量开盘母带ORMCD[低速原抓WAV+CUE]