2010-05-21 半年前的版本还是有问题。。存档
这个问题比较麻烦，bug是这样产生的。input/textarea的外层是block形式的容器，这个外层容器同时拥有float和margin-left/rmargin-right属性时候，会在margin的一边产生双倍边距。其中一部分是真正我们要的margin，另一部分说不出什么，看起来可以算是与margin等宽的padding。
举一些例子
处理方法
1，在input/textarea 与外层容器中再插入一层标签，block、inline的都可以。不过找parent之类的操作就会有点儿问题。
2，不管用什么方法，手动或者js在input/textarea前面插入一行代码
- <span style="width:0;overflow:hidden;display:inline-block;float:left;"> </span>
<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目前没想到解决方案啊*****
------------------------------------------------------------------------------------------------------------------------
2009-11-12
div（也可能是其他元素） 包裹的一个 input，当div 浮动的时候，如果此div 或者其外层元素的css属性中包含margin（margin-left / margin-right），才会产生边距bug。这个bug的值是margin的值。
解决方法：
这样一个结构，input 前面加一个span，如下：
<div><span>.</span><input type="button" value="Confirm" /></div>
span里面可以是 ，也可以是“.”或者其他任何字符，一下子就可以清除input 和 div之间的padding啦·～～
当然，要配上必不可少的css。span 的 color 颜色要于背景一致，并设置 font-size: 0;
or
在外层的div的css中加上min-height(IE6 下为 -height ) 属性。值任意。我选择1px。
or
将margin的值 用padding。。（前提是：如果情况允许。）
------------------------------------------------------------------------------------------------------------------------------------------------
2009-11-11 版本————此版解释错误！留着是为了提醒自己，下次再看到bug用心一些。
div（也可能是其他元素） 包裹的一个 input，当div 浮动的时候，input 与div之间就会出现padding。这不是真正的padding 或者 margin，而是一个IE 系列解析的bug。无论清楚input 还是div 的margin，padding值。那个边距仍然存在。据称，这个边距的值为5em，本人没有做验证，但暂时相信吧！
主要是说一下解决方案：
<div><input type="button" value="Confirm" /></div>
这样一个结构，input 前面加一个span，如下：
<div><span>.</span><input type="button" value="Confirm" /></div>
span里面可以是 ，也可以是“.”或者其他任何字符，一下子就可以清除input 和 div之间的padding啦·～～
当然，要配上必不可少的css。span 的 color 颜色要于背景一致，并设置 font-size: 0;
如此，解决input 外层浮动后的边距问题。
扫一扫
1479
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
