您的位置:首页 > 理论基础 > 计算机网络

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

2014-01-21 12:02 239 查看
<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;width: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了。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: 
相关文章推荐