IE6，IE7margin导致div的下级元素位置出错的问题(转载自网络,最开始的来源不知道,因为我是转载别人的转载的)

<div class="speech" style=“width：100px；margin-left：10px；”>

<textarea>我也要参与交流</textarea>

</div>

 

在ie6，和IE7中，textarea左边也会继承10px 的margin值。

我解决的办法是margin改成padding就可以了。

或者是：

 

<div class="speech" style=“width：100px；margin-left：10px；”>

<span><textarea>我也要参与交流</textarea></span>

</div>

在外面加上span就可以了

 

 

在网上又找到这样的解释。

代码如下： <div id="div_1" style="margin-left:100px">  <div id="div_2" style="border:1px solid #000;100px"><input type="submit" value="button"/></div> </div> 在IE7下出错。我通过div_1是整个内容距离左边100px，结果导致了div_2中的内容又距离左边100px，实际的想过好像是div_1 margin-left：100px同时div_2 padding-left：100px。 如果把div_1的margin改为padding就正常了。 请问这样的问题如何解决

 

答案：

实际上在IE6已经有这个bug了，但是很不幸IE7继承了IE6的BUG多的优良传统。  就是说你的错误在IE6和IE7下都会产生。  产生这种错误的原因是因为当input仅仅包含父元素，父元素拥有layout，和margin-left属性时，IE6和7的input就会错误的继承margin-left这样的属性。  还是说解决办法吧。 网上总结了很多解决办法，为了不改变你原始父元素的样式定义，推荐的解决办法就是： 给input元素外面套一个span,label这样的内联元素，这样就会消除bug。 原理很简单，input父元素是内敛元素，就不会继承margin-left了。