[求助] button按钮在 IE 中两边被拉伸的解决办法的疑惑

asir　楼主

7 主题	15 好友	150 积分

初级会员

帖子: 37
威望: 0
居住地: 湖南省长沙市
注册时间: 2006-5-18

发消息

发表于 2009-5-11 11:58:41 |显示全部楼层

大家在写按钮（input (type="button") 、button）的时候会发现在 IE 下：
随着字数的增多，两边的间距也会越来越大。
到底是什么原因呢？
IE 下按钮的 value 值每增加 4 个字节（汉字为 2 个）时，就会在按钮的两边产生总共一个字节的内边距宽度。
IE 下给按钮元素设置 overflow 属性的 visible 值（注：padding 值仅在设置了overflow:visible 属性后才有效）后，发现原来还有一个小 BUG —— 如果将按钮置于表格单元格中，虽然按钮显示正确了，但是原先预留的宽度大小却没有改变，仍然占据着空间，需要在 IE6 中设置按钮的宽度（width）为 0（IE7同样也存在此 BUG，但暂时没有寻找到好的方式解决）。

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>test</title>
<style>
.botbg_brown{background:url(http://s16.photo.store.qq.com/http_imgload.cgi?/rurl4_b=e35b47e31535b0365b9bd48f9d8dcb8815faf696c8c9e5cd9d0ed78244091da347dfd17eb1253a6093dca3e6bbc074ff5262d841d84c97036a308227826ea213819723b4c1b29eb65beee860cf18d9b99d1cdaca) right no-repeat; height:26px;line-height:26px;padding-right:15px;float:left;}
.botbg_brown_l{background:url(http://s16.photo.store.qq.com/http_imgload.cgi?/rurl4_b=e35b47e31535b0365b9bd48f9d8dcb8815faf696c8c9e5cd9d0ed78244091da347dfd17eb1253a6093dca3e6bbc074ff5262d841d84c97036a308227826ea213819723b4c1b29eb65beee860cf18d9b99d1cdaca) left no-repeat; height:26px;line-height:26px;padding-left:15px;float:left;}
.botbg_brown input{cursor:pointer;z-index:999; border:none; background:none; font-size:14px; line-height:24px; color:#FFFFFF; font-weight:bold;text-align:center;padding:0; margin:0;vertical-align:middle; height:26px;padding: 0 .25em; width: auto; _width: 0; overflow:visible !ie; }
.bot_brown_7{width:170px; height:26px;}
</style>
</head>
<body>
<div class="bot_brown_7">
<div class="botbg_brown">
<span class="botbg_brown_l"></span>
<input type="button" value="查看所以商品>>"/>
</div>
</div>
</body>
</html>

复制代码

点按钮只有中间有字的部分可以点 IE和FF 被点后的区域还不一样
琢磨了好久没找到好的解决方案
^_^希望高手帮帮忙哈！

西部数码云主机4G内存500G仅需423元

使用道具举报

4321285　

李寻饭

96 主题	189 好友	7020 积分

版主

帖子: 3486
威望: 2
居住地: 北京市昌平区
注册时间: 2006-5-25

发消息

发表于 2009-5-11 12:20:43 |显示全部楼层

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>test</title>
<style>
.botbg_brown{background:url(http://s16.photo.store.qq.com/http_imgload.cgi?/rurl4_b=e35b47e31535b0365b9bd48f9d8dcb8815faf696c8c9e5cd9d0ed78244091da347dfd17eb1253a6093dca3e6bbc074ff5262d841d84c97036a308227826ea213819723b4c1b29eb65beee860cf18d9b99d1cdaca) right no-repeat; height:26px;line-height:26px;padding-right:15px;float:left;}
.botbg_brown_l{background:url(http://s16.photo.store.qq.com/http_imgload.cgi?/rurl4_b=e35b47e31535b0365b9bd48f9d8dcb8815faf696c8c9e5cd9d0ed78244091da347dfd17eb1253a6093dca3e6bbc074ff5262d841d84c97036a308227826ea213819723b4c1b29eb65beee860cf18d9b99d1cdaca) left no-repeat; height:26px;line-height:26px;padding-left:15px;float:left;}
.botbg_brown input{cursor:pointer;z-index:999; border:none; background:none; font-size:14px; line-height:24px; color:#FFFFFF; font-weight:bold;text-align:center;padding:0; margin:0;vertical-align:middle; height:26px;padding: 0 .25em; width: auto; _width: 0; overflow:visible !ie;  }
.bot_brown_7{width:170px; height:26px;}
</style>
</head>
<body>
<div class="bot_brown_7">
<div class="botbg_brown">
<span class="botbg_brown_l"></span>
<input type="button" value="查看所以商品>>"/>
</div>
</div>
</body>
</html>

提示：您可以先修改部分代码再运行