在IE8中通过jQuery设置的页边距-顶部未更新
我正在使用jQuery代码在计算位置设置一个div，使用的是页边距顶部(而不是顶部)，它在除IE8之外的所有浏览器中都能很好地工作。(它可以在IE6和IE7中工作)。
我将问题的范围缩小到这样一个事实:如果我使用jQuery设置最高边距，它不会在IE8上更新，边距仍然是由CSS设置的。我在一些论坛上看到这是一个常见的IE8问题，我已经找到了一些解决方法，但我发现了一些东西，让我怀疑它是否真的是一个错误?！我将所有代码简化为以下代码，但仍然无法正常工作：
下面是HTML的主体：
<body>
<div class="menu_header"></div>
<div class="main_content"></div>
</body> 下面是CSS代码：
.menu_header
{
position:relative;
background-color:red;
margin-left:auto;
margin-right:auto;
width:950px;
height:50px;
}
.main_content
{
position:relative;
margin-top:0px;
width:950px;
height:500px;
background-color:black;
margin-left:auto;
margin-right:auto;
}最后是jQuery代码。
$(document).ready(function(){
$(".main_content").css("margin-top","100px");
})如果你在IE8中尝试前面的代码，你会得到第一个div (.menu_header)的正确定位，但是第二个div (.main_content)将不会有任何边距。我认为jQuery根本没有更新HTML/CSS，并且原始值0px仍然有效，所以我使用IE8中的开发人员工具进行了检查，我发现CSS代码已经更新(内联CSS)，但仍然没有显示顶部页边距。
好吧，正如我所说的，我在互联网上发现了一个已知的IE8错误，它是由于各种原因发生的(例如，由于div设置为浮动而导致边界崩溃，以及其他依赖于CSS“内容”的解释)，但我最初有一部分jQuery代码让我想知道这个错误到底是什么，因为没有一个解释与此相符?！
为了清楚起见，我在原始jQuery代码中增加了几行代码，减少到以下几行：
$(document).ready(function(){
$(".main_content").css("margin-top","100px");
$(window).resize(function(){$(".main_content").css("margin-top","100px");})
})嗯，在这段代码中，你可能已经注意到了，当用户调整浏览器大小时，有一行额外的代码(第3行)来设置页边距-顶部，神奇的是，当用户调整浏览器大小时，页边距-顶部更新并正确显示，但当文档准备就绪时(第2行)仍然不起作用！
我继续玩(是的，在这一点上它成了一个游戏，因为微软不会认真地这么做!)我注意到，在HTML代码中，如果我在div后面添加<p>some text</p>或<span>some text</span>或任何包含内容的元素，问题不会发生，边距也会正确更新。
因此，基本上，我不是在寻找变通方法，因为我有两个是添加一个带有内容的div，并将其高度设置为0和overflown:hidden，这样它就不会改变网站设计，或者在div之后添加<p> </p>。
我只希望有人能向我解释一下，为什么在resize()上更新页边距不起作用，为什么在div后面添加一些HTML可以解决这个问题，还有比我现在的解决方案更简单的其他解决方案吗？
回答 1
Stack Overflow用户
发布于 2012-01-04 05:40:37
这只是IE中的一件事。
IE忽略margin-top，您必须将margin-bottom应用于前面的元素或使用padding。
如果你还在寻找原因，我会尝试在.main_content中添加一些height，浮动并清除它，等等……
https://stackoverflow.com/questions/8718474
复制相似问题
腾讯云开发者
