按钮在IE中被拉伸

2009/04/02  |  23:01分类:Css  |  标签:  |  304 views

其实工作中大家经常会遇到这种问题,就是用系统自带的按钮的时候,在IE下会被两边拉伸。这个问题在其他浏览器中应该问题不大。
大家在写按钮(input、button)的时候会发现在 IE 下:
1. 随着字数的增多,两边的间距也会越来越大。
2. 在 WIN 的XP 风格下,当字数很多时,两边还会出现严重的锯齿。
到底是什么原因呢?
1、IE 在按钮的 value 值每增加 4 个字节(汉字为 2 个)时,就会在按钮的两边产生总共一个字节的内边距宽度。
2、IE 的按钮(XP 风格)默认样式是一个固定尺寸的圆角矩形图片作背景,所以一旦按钮变宽变高后,这个固定尺寸的圆角矩形图片的边缘自然就会出现“拉毛”的现象了。

对于第二个问题我们暂时没办法去解决,除非 WIN 系统自己修复 BUG ,但对于第一个问题 ,我们还是可以修复的。

最终的修复代码如下:

input.button {
padding: 0 .25em;
width: auto;
_width: 0;
overflow:visible !ie;
}

这个问题http://www.planabc.net/2008/11/12/the_stretched_buttons_bug/这里写的很清楚了,我就不班门弄斧了。有兴趣的朋友可以去看看。

喜欢本文,那就收藏到: Del.icio.us Google书签 Digg Live Bookmark Technorati Furl Yahoo书签 Facebook 百度搜藏 新浪ViVi 365Key网摘 天极网摘 和讯网摘 博拉网 POCO网摘 添加到饭否 QQ书签 Digbuzz我挖网

发表您的评论