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;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了。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步