【发布时间】：2012-01-03 20:55:08
【问题描述】：
我正在使用 jQuery 代码将 div 设置在使用 margin-top（而不是顶部）的计算位置，这在除 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 错误，发生的原因有多种（例如，margin collapsing with a div set to float 以及其他取决于 CSS“内容”的解释），但我最初有一部分 jQuery 代码让我想知道这个 bug 的真正含义是什么，因为没有任何解释适合这个？！
为了清楚起见，我在原始 jQuery 代码中所拥有的只是几行，我将其简化为以下内容：
$(document).ready(function(){
$(".main_content").css("margin-top","100px");
$(window).resize(function(){$(".main_content").css("margin-top","100px");})
})
好吧，在这段代码中，您可能已经注意到，还有一行（第 3 行）用于在用户调整浏览器大小时设置 margin-top，而神奇的是，当用户调整浏览器大小时，margin-顶部更新并正确显示，但在文档准备好时仍然无法正常工作（第 2 行）！
我继续玩（是的，在这一点上它变成了一个游戏，因为微软不能认真这样做！）我注意到在 HTML 代码中，如果我添加 <p>some text</p> 或 <span>some text</span> 或其他带有内容的元素，在 div 之后，不会出现问题，并且边距正确更新。
所以，基本上，我不是在寻找解决方法，因为我有两个方法是添加一个带有内容的 div 并将其高度设置为 0 和 overflown:hidden，这样它就不会改变网站设计或添加 @ 987654328@div后。
我只是希望有人可以向我解释为什么当文档准备好而在 resize() 时更新边距不起作用，为什么在 div 后添加一些 HTML 可以解决问题，还有其他解决方案吗？可能比我的更简单？
【问题讨论】：
-
您是否也尝试将其附加到
$(window).load()？div是否包含img？还有一个 jsfiddle 玩会有所帮助 -
我创建了新的 HTML/CSS/JS 文件，其中只有此处显示的代码（除了此处缺少的 HTML 头部分之外没有其他内容），问题与描述的完全相同。使用
$(window).load()并不能解决问题。正如我所说，当使用调试器检查时，内联 CSS 会更新，这意味着 ready() 事件正确触发并且 jQuery 代码工作，但即使通过 jQuery 脚本在内联 CSS 中设置，边距根本不会显示. -
这可能是一个 CSS 问题。尝试在前面的元素（.menu-header）上设置
margin-bottom，而不是在以下元素上设置margin-top。如果您坚持为 .main-content 设置样式，请尝试padding -
感谢 Marek 的帮助，在菜单标题上使用 margin-bottom 可以达到预期的效果。但是我仍然想知道为什么它不适用于margin-top。这是您要求的原始代码的 jsfiddle：jsfiddle.net/tvMef/1 如果您在 IE8 中加载它，则没有边距，但如果您调整窗口大小，则会出现边距。任何线索为什么？
-
我稍后会发布它作为答案。我不能告诉你为什么，它只是那些 IE 的事情之一。也许尝试用谷歌搜索一下。
标签： jquery internet-explorer-8 resize solution margins