Javascript jQuery .css("margin-top", value) 未在 IE 8（标准模式）中更新
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2321887/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery .css("margin-top", value) not updating in IE 8 (Standards mode)
提问by Jason Sperske
I'm building an auto-follow div that is bound to the $(window).scroll() event. Here is my JavaScript.
我正在构建一个绑定到 $(window).scroll() 事件的自动跟随 div。这是我的 JavaScript。
var alert_top = 0;
var alert_margin_top = 0;
$(function() {
alert_top = $("#ActionBox").offset().top;
alert_margin_top = parseInt($("#ActionBox").css("margin-top"));
$(window).scroll(function () {
var scroll_top = $(window).scrollTop();
if(scroll_top > alert_top) {
$("#ActionBox").css("margin-top", ((scroll_top-alert_top)+(alert_margin_top*2))+"px");
console.log("Setting margin-top to "+$("#ActionBox").css("margin-top"));
} else {
$("#ActionBox").css("margin-top", alert_margin_top+"px");
};
});
});
This code assumes that there is this CSS rule in place
这段代码假设有这个 CSS 规则
#ActionBox {
margin-top: 15px;
}
And it takes an element with the id "ActionBox" (in this case a div). The div is positioned in a left aligned menu that runs down the side, so it's starting offset is approximately 200 px). The goal is to start adding to the margin-top value once the user has scrolled past the point where the div might start to disappear off the top of the browser viewport (yes I know setting it to position: fixed would do the same thing, but then it would obscure the content below the ActionBox but still in the menu).
它需要一个 id 为“ActionBox”的元素（在本例中为 div）。div 位于一个左对齐的菜单中，该菜单向下运行，因此它的起始偏移量约为 200 像素）。目标是在用户滚动超过 div 可能开始从浏览器视口顶部消失的点后开始添加 margin-top 值（是的，我知道将其设置为 position: fixed 会做同样的事情，但随后它会掩盖 ActionBox 下方但仍在菜单中的内容）。
Now the console.log shows that the event is firing every time it should and it's setting the correct value. But in some pages of my web app the div isn't redrawn. This is especially odd because in other pages (in IE) the code works as expected (and it works every time in FF, Opera and WebKit). All pages evaluate (0 errors and 0 warnings according to the W3C validator and the FireFox HTMLTidy Validator), and no JS errors are thrown (according to the IE Developer Toolbar and Firebug). One other part to this mystery, if I unselect the #ActionBox margin-top rule in the HTML Style explorer in the IE Developer Tools then the div jumps immediately back in the newly adjusted place that it should have if the scroll event had triggered a redraw. Also if I force IE8 into Quirks Mode or compatibility mode then the even triggers an update.
现在，console.log 显示该事件每次都应该触发并且设置了正确的值。但是在我的网络应用程序的某些页面中，div 没有重绘。这尤其奇怪，因为在其他页面（在 IE 中）代码按预期工作（并且每次都在 FF、Opera 和 WebKit 中工作）。所有页面都进行评估（根据 W3C 验证器和 FireFox HTMLTidy 验证器，0 个错误和 0 个警告），并且没有抛出任何 JS 错误（根据 IE 开发人员工具栏和 Firebug）。这个谜团的另一部分是，如果我在 IE 开发人员工具的 HTML 样式资源管理器中取消选择 #ActionBox margin-top 规则，那么 div 会立即跳回到新调整的位置，如果滚动事件触发了重绘. 此外，如果我强制 IE8 进入 Quirks 模式或兼容模式，那么甚至会触发更新。
One More thing, it works as expected in IE7 and IE 6 (thanks to the wonderful IETester for that)
还有一件事，它在 IE7 和 IE 6 中按预期工作（感谢出色的 IETester）
回答by Mottie
I'm having a problem with your script in Firefox. When I scroll down, the script continues to add a margin to the page and I never reach the bottom of the page. This occurs because the ActionBox is still part of the page elements. I posted a demo here.
我在 Firefox 中遇到了您的脚本问题。当我向下滚动时，脚本继续向页面添加边距，而我从未到达页面底部。这是因为 ActionBox 仍然是页面元素的一部分。我在这里发布了一个演示。
- One solution would be to add a
position: fixedto the CSS definition, but I see this won't work for you - Another solution would be to position the ActionBox absolutely (to the document body) and adjust the
top. - Updated the code to fit with the solution found for others to benefit.
- 一种解决方案是
position: fixed在 CSS 定义中添加 a ，但我认为这对您不起作用 - 另一种解决方案是绝对定位 ActionBox（到文档正文）并调整
top. - 更新了代码以适应为其他人找到的解决方案。
UPDATED:
更新：
CSS
CSS
#ActionBox {
position: relative;
float: right;
}
Script
脚本
var alert_top = 0;
var alert_margin_top = 0;
$(function() {
alert_top = $("#ActionBox").offset().top;
alert_margin_top = parseInt($("#ActionBox").css("margin-top"),10);
$(window).scroll(function () {
var scroll_top = $(window).scrollTop();
if (scroll_top > alert_top) {
$("#ActionBox").css("margin-top", ((scroll_top-alert_top)+(alert_margin_top*2)) + "px");
console.log("Setting margin-top to " + $("#ActionBox").css("margin-top"));
} else {
$("#ActionBox").css("margin-top", alert_margin_top+"px");
};
});
});
Also it is important to add a base (10 in this case) to your parseInt(), e.g.
同样重要的是在您的parseInt().
parseInt($("#ActionBox").css("top"),10);
回答by Cheeso
Try marginTopin place of margin-top, eg:
尝试marginTop代替margin-top，例如：
$("#ActionBox").css("marginTop", foo);
回答by Jason Sperske
I found the answer!
我找到了答案！
I want to acknowledge the hard work of everyone in trying to find a better way to solve this problem, unfortunately because of a series of larger constraints I am unable to select them as the "answer" (I am voting them up because you deserve points for contributing).
我要感谢每个人努力寻找更好的方法来解决这个问题的辛勤工作，不幸的是，由于一系列更大的限制，我无法选择它们作为“答案”（我投票给它们，因为你应该得到分数贡献）。
The specific problem I was facing was a JavaScript onScoll event that was firing but a subsequent CSS update that wasn't causing IE8 (in standards mode) to redraw. Even stranger was the fact that in some pages it was redrawing while in others (with no obvious similarity) it wasn't. The solution in the end was to add the following CSS
我面临的具体问题是触发了 JavaScript onScoll 事件，但随后的 CSS 更新并未导致 IE8（在标准模式下）重绘。更奇怪的是，在某些页面中它正在重绘，而在其他页面中（没有明显的相似性）它不是。最后的解决方案是添加以下CSS
#ActionBox {
position: relative;
float: right;
}
Here is an updated pastbinshowing this (I added some more style to show how I am implementing this code). The IE "edit code" then "view output" bug fudgey talked about still occurs (but it seems to be a event binding issue unique to pastbin (and similar services)
这是一个更新的Pastbin，显示了这一点（我添加了更多样式来展示我如何实现此代码）。fudgey 谈到的 IE“编辑代码”然后“查看输出”错误仍然发生（但这似乎是 Pastbin（和类似服务）独有的事件绑定问题
I don't know why adding "float: right" allows IE8 to complete a redraw on an event that was already firing, but for some reason it does.
我不知道为什么添加 "float: right" 允许 IE8 完成对已经触发的事件的重绘，但由于某种原因它确实如此。
回答by RckLN
The correct format for IE8 is:
IE8 的正确格式是：
$("#ActionBox").css({ 'margin-top': '10px' });
with this work.
有了这项工作。
回答by RckLN
try this method
试试这个方法
$("your id or class name").css({ 'margin-top': '18px' });
