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了。
<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了。
相关文章推荐
- 解决RecyclerView删除Item导致位置错乱的问题 以及删除最后一个出错的问题
- WCF 套接字连接已中止。这可能是由于处理消息时出错或远程主机超过接收超时或者潜在的网络资源问题导致的
- WCF 套接字连接已中止。这可能是由于处理消息时出错或远程主机超过接收超时或者潜在的网络资源问题导致的
- 套接字连接已中止。这可能是由于处理消息时出错或远程主机超过接收超时或者潜在的网络资源有关问题导致的。本地套接字超时是“00:04:59.9990000”
- Android library版本决定它的高度和宽度导致的位图位置出错问题
- 关于spring boot 中App类位置不同导致出错的问题的解决方法
- IE6 IE7: div中table宽度100%导致的宽度问题
- div样式text-align在子元素缩进不规范的情况下,chrome出现的问题(貌似结果是inline-block导致的)
- 关于spring boot 中App类位置不同导致出错的问题的解决方法
- div+css 布局下兼容IE6 IE7 FF常见问题(转载)
- 关于div中放入一个img元素导致div高度会多出几个像素的解决问题
- ***套接字连接已中止。这可能是由于处理消息时出错或远程主机超过接收超时或者潜在的网络资源问题导致的
- 套接字连接已中止。这可能是由于处理消息时出错或远程主机超过接收超时或者潜在的网络资源问题导致的。本地套接字超时是“00:01:00”
- storyboard 约束出错导致textfileld位置移动,如何根据以下报错信息排查问题位置
- ie6下面关于html编码问题导致的js出错,css不被应用
- div+css - Firefox和IE浏览器兼容问题 - padding-right在IE6下导致抖动
- 关于div中放入一个img元素导致div高度会多出3px像素的解决问题
- 解决方案/DIV+CSS 在 IE7/IE6/Firefox间的兼容性问题 (转载)
- 【WCF】 套接字连接已中止。这可能是由于处理消息时出错或远程主机超过接收超时或者潜在的网络资源问题导致的。本地套接字超时是“00:00:56.9810000”。