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

在Web开发中，按钮的设计无疑是一个重要的环节。但当我们谈及按钮时，不得不面对的一个棘手问题就是在不同的浏览器和操作系统环境下，按钮的表现可能会出现一些让人头疼的问题。特别是在Internet Explorer（IE）浏览器下，按钮的表现尤为突出。特别是在Windows的XP风格下，当按钮中的字数过多时，两边会出现锯齿状的边缘。那么，背后的原因究竟是什么呢？

蓝色理想的原WEB标准化专栏斑竹zbm2001z为我们揭示了部分真相。在IE浏览器中，当按钮的value值每增加4个字节（汉字为2个）时，就会在按钮的两边产生总共一个字节的内边距宽度。IE的按钮（特别是XP风格）默认样式是一个固定尺寸的圆角矩形图片作为背景。当按钮的尺寸变大时，这个固定尺寸的圆角矩形图片的边缘就会出现所谓的“拉毛”现象。

为了解决这个问题，我们可以采用以下的修复代码（Demo）：

```css

input.button {

padding: 0 .25em;

width: auto;

_width: 0; / 这一行是为IE6设计的hack /

overflow: visible !ie; / 让overflow属性在IE中生效 /

}

```

上述代码旨在修复IE浏览器下的按钮显示问题。其中包含了针对IE6的特定hack以及对overflow属性的使用技巧。这样处理之后，我们的按钮在IE浏览器下也能展现出良好的表现，避免因环境问题导致的用户体验下降。