html字数不同相同宽度的按钮,HTML_按钮在IE中两边被拉伸的 BUG，大家在写按钮（input、button） - phpStudy...

按钮在IE中两边被拉伸的 BUG

大家在写按钮(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;}相关阅读:

Ubuntu Linux系统常见问题解决方法集锦

Windows7系统彻底屏蔽U盘的方法

VBScript常用函数总结

vb.net入门——分组控件：Panel控件的使用

炽热的文字

ecshop安装遇到安装数据失败的解决方法

网站背景换成兔年喜庆大气背景图片三个打包

学习使用curl采集curl使用方法

如何使用Win7+IE9一键锁定你所喜欢的网站

DIV+CSS网页布局心得

PHP框架之Kohana

Windows下JSP开发环境的配置

JSP与Cookie

小型js框架veryide.librar源代码