这个问题比较麻烦，bug是这样产生的。input/textarea的外层是block形式的容器，这个外层容器同时拥有float和margin-left/rmargin-right属性时候，会在margin的一边产生双倍边距。其中一部分是真正我们要的margin，另一部分说不出什么，看起来可以算是与margin等宽的padding。
举一些例子
<!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=utf-8" />
<title>神奇的 IE Bug</title>
<style type="text/css">
body{background:#FFFFD7;}
div,p,hr{clear:both;}
</style>
</head>
<body>
<!--产生边距的-->
<p>带有margin-left的input</p>
<div style="float:left;margin-left:100px;border:1px solid red;"><input type="button" value="Confirm" /></div>
<p>带有margin-left的textarea</p>
<div style="float:left;margin-left:100px;border:1px solid red;"><textarea></textarea></div>
<!--不产生边距的-->
<p>带有margin-left的a</p>
<div style="float:left;margin-left:100px;border:1px solid red;"><a href="#">link</a></div>
<p>带有margin-left的span</p>
<div style="float:left;margin-left:100px;border:1px solid red;"><span>text</span></div>
<p>带有margin-left的select （同样作为表单项，select就很给面子）</p>
<div style="float:left;margin-left:100px;border:1px solid red;">
<select>
<option>select</option>
</select>
</div>
<p>带有margin-left的img</p>
<div style="float:left;margin-left:100px;border:1px solid red;"><img src="http://www.iteye.com/upload/logo/user/252181/22c9d087-b11d-3d3b-80b5-cd839eea4585.gif?1274326767" /></div>
<hr />
<!--产生边距的-->
<p>带有margin-right的input</p>
<div style="float:left;margin-right:100px;border:1px solid red;"><input type="button" value="Confirm" /></div>
<p>带有margin-right的textarea</p>
<div style="float:left;margin-right:100px;border:1px solid red;"><textarea></textarea></div>
</body>
</html>
这些代码在ie5.5,6,7下大约看到的效果如下
处理方法
1，在input/textarea 与外层容器中再插入一层标签，block、inline的都可以。不过找parent之类的操作就会有点儿问题。
2，不管用什么方法，手动或者js在input/textarea前面插入一行代码
<span style="width:0;overflow:hidden;display:inline-block;float:left;"> </span>
最后一项是为了避免把别的浏览器挂掉加上的。只实验了ff。预计应该可行。
3，情况允许的前提下，把margin转换成padding。
发现产生此现象的标签，目前只有input和textarea。img, a, span, select 没有此问题。其他标签未测试。
*****只解决了margin-left，margin-right目前没想到解决方案啊*****
1676
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
