IE6/IE7下margin-top失效解决方法

最新推荐文章于 2021-12-14 14:58:51 发布
转载 最新推荐文章于 2021-12-14 14:58:51 发布 · 1.7k 阅读 · 0

本文探讨了在Internet Explorer 6和7中遇到的margin-top属性失效的问题，并提出了两种解决方案：一是通过使用padding替代margin；二是通过调整DOM结构避免此问题。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

遇到一个margin-top在IE6/IE7失效的情况，第一反应是margin折叠引起的，但是又一看发现不是，上网查找，果然这是一个bug。

解决办法有两个：

1.使用padding来代替margin，比如设置其父元素的padding-top，或者设置这个块元素的padding-top，不过要注意padding对其背景的影响。

2.使这个块不直接跟在前面的这个绝对定位元素后面，比如在它们之间插入一个空div标签，或者交换这两个标签的前后位置

解决IE7浏览器下margin或padding失效的问题
sinat_35391165的博客
08-10 2909
首先声明这里讨论的所有问题都是在浮动清除干净后产生的 在IE7浏览器下，margin或padding可能会出现失效的问题，尤其是外部两个div的margin-bottom或者padding-bottom margin可能会出现完全失效，padding则可能出现给出值但实际距离缩小的情况 这里举两个例子 1.先来看看原本想要的效果 但实际在IE7下会出现的效果 1）margin-bo...
IE8下margin-top失效
zhu1988renhui的专栏
07-28 3988
今天看了篇清除浮动的文章，自己练习的时候发现在IE8下面div的margin-top设置了根本不起作用。 浮动 body,div{ margin:0; padding:0; } .box1{ background:#900; width:200px; height:200px; margin:20px 0 0 20px; float:left; } .box2{ bac
IE6,IE7浏览器下 margin 无效的解决方法
09-25
前几天做一个页面的时候遇到了这个问题。我设置div的margin-top IE6下居然无效；后来搞了好半天没弄出来。
ie6中margin失效问题
bangxionger9224的博客
06-04 139
在div的外面添加父级div并设置 padding-bottom: 10px;！<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> .clear { ...
css兼容性案例：margin-top在IE6/7下失效
qq_24520459的博客
07-17 205
又到了利用碎片学习的时间了，看看这个兼容性的小案例，前端开发者经常遇到的问题:margin-top在IE6/7下失效。 一个块级元素，触发了hasLayout（比如设置...
IE6/IE7下绝对定位position:absolute和margin的冲突问题解决
09-25
在示例代码中，`layer3`的`margin-top`在IE6/IE7下不会起作用，除非`width`属性被删除。这是因为IE6/7在处理绝对定位元素时，会将它们从正常文档流中移出，但仍然会影响相邻元素的布局。当绝对定位元素没有宽度时，...
外边距塌陷和margin-top失效问题及解决方案
bdh123b的博客
12-04 586
外边距塌陷 外边距塌陷是小白在写CSS最常遇见的问题，我们可以看一下下面的这个例子： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,
DIV多层嵌套margin-top的BUG问题
09-25
通过使用浮动、内边距或者调整元素的布局方式，可以有效地解决多层嵌套`margin-top`带来的问题，确保在多种浏览器下得到一致的显示效果。同时，这也提醒我们在进行前端开发时，应始终考虑浏览器兼容性，以提供更好的...
使用zoom解决IE6 margin无效BUG
12-12
在互联网的早期，Internet Explorer 6 (IE6) 是一款广泛使用的浏览器，但它存在许多兼容性和渲染问题，其中最令人头疼的问题之一就是“margin塌陷”或者“margin无效”的BUG。这个问题主要体现在当我们在IE6中尝试为...
子盒子设置margin-top 失效
sussie11的博客
12-14 972
父与子盒子 布局 子盒子设置margin-top 失效 .guide-box { background: #fff; border-radius: 4px; **border: 1px solid #effdfd;** 给父亲加一个border 可以解决 儿子设置margin-top 失效问题 .guide-step { margin: 8px; height: 179px; background-color: #effdfd; } .guide-content { padding: 20px;
IE6 margin无效BUG解决办法之一
夜亡者的博客
05-30 971
IE6 margin无效的bug， 解决方法有很多。 其中有个结局办法之一。 看代码： some contents  在一些情况下IE6会无效，解决办法是下面的方式。看代码: some contents 就是在最外层加上一个div盒子加上zoom:1值 zoom只有IE6才有的，可以让元素放大缩小 触发IE浏览器的haslayout
解决IE6、IE7下浮动元素margin-bottom失效的问题
跟着信仰走
07-23 289
IE6、IE7下浮动元素margin-bottom失效的问题： 不是IE6、IE7的情况下效果是这样的： 在IE6、IE7情况下效果却变成了酱紫： margin-bottom:10px;无效了   怎样解决呢？   那就用padding吧（这意味着div class="warp clear"的区域包括红色区域和padding-bottom这10个像素），不要用marg...
IE7下解决A标签使用padding宽度自适应 padding失效的问题
jQuery,CSS,Asp.net及前端开放问题汇总
11-03 1909
padding:0 10px; overflow:visible; padding-right:-10px;
margin-bottom在IE6和IE7下失效的解决办法
Travelling1006的专栏
01-01 96
IE6/7下margin-bottom无效一般出现在容器里某元素设置后在父容器内无效，这个时候只需要在父容器中加入以下两句css，基本上所有的浏览器都兼容了： overflow:hidden;zoom:100%; 　　 转载于:https://www.cnblogs.com/talentzemin/p/4197737.html...
IE、FF padding-top兼容性问题
黑色幽默
07-07 3037
再次申明加入文档头的重要性 由于firefox为标准浏览器，所以在有无dtd头的情况下显示都如上图所示 在ie6/7/8中，当存在dtd头的情况下，符合标准，显示同firefox，如上图所示 在无dtd头的情况下，ie6/7/8中则padding会算在height中，如上图所示 以上内容经过firefox3，IE6/7/8验证 所以，DOCTYPE 影
IE6、IE7中定位元素导致相邻元素margin-top失效 解决方案
weixin_33736649的博客
02-27 94
出现此bug的原因有几下几点： 元素被设置为块元素（display:block/list-item/table）； 该元素触发了 IE 的 hasLayout； 该节点之前存在一个可被渲染的绝对定位或固定定位元素； 该元素设置了不等于 0 的 margin-top 值（正负 margin-top 值均可）。 解决方法是： 相邻元素用padding-top来代替margin-...
解决：margin-top导致内容在IE6中下沉
懒人改变世界
03-21 770
父标签中加入：position:relative
IE6/IE7下只设置margin-left，左右都有边距问题
dazwxrt0338的博客
08-26 172
CSS代码 div { border: 1px solid red; } .inner { width: 80px; height: 80px; float: left; position: relative; margin-left:...
IE6下fixed属性问题的CSS解决方案
2. `top: expression...` 和 `_margin-top` 的使用：同样地，通过`expression`计算元素的总上边距（包括`margin-top`），并将其应用到`top`属性，以及一个额外的私有`_margin-top`属性，目的是确保元素在IE6中的位置...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值