使用 jQuery 更改位置属性在 IE 中无法正常工作答案

【问题标题】：Changing position property with jQuery doesn't work correctly in IE使用 jQuery 更改位置属性在 IE 中无法正常工作
【发布时间】：2011-08-15 12:57:20
【问题描述】：

应该是几行简单的 jQuery 在 Internet Explorer 中似乎无法正常工作。在 Firefox 中运行良好。当您在视口底部的 200 像素内滚动时，固定位置的 div 应该在您滚动过去时“粘”到页面上。

这是一个问题的 jsFiddle 示例： jsFiddle example of fixed position div problem

在 Firefox 中，该示例可以正常工作。当滚动位置距文档底部高度 200 px 时，固定位置 div 变为绝对位置，其 Top: 属性为页面高度减去视口高度减去元素高度。换句话说，当您继续滚动经过它时，它会“粘”在原来的位置。

在 Internet Explorer 中，div 只是停留在底部，jquery if 条件从未满足。

【问题讨论】：

标签： jquery css internet-explorer cross-browser

【解决方案1】：

尝试使用

var till = $('body').height()-800;

...而不是

var till = $('html').height()-800;

我猜测 HTML 元素本身的高度在 IE 中没有明确定义。您似乎也在使用文档准备功能的“this”来抓取窗口；你应该改用 window 。此外，我认为您示例中“超出限制后”的定位数学有点错误。

此外，一旦您达到了限制，您的 div 最终会在其 CSS 中设置“顶部”和“底部”值，这可能会使浏览器感到困惑。我添加了一个重置（设置“顶部”值时将“底部”值设置为“自动”。）

试试这个：http://jsfiddle.net/gothick/HVhLw/32/；对我来说，它似乎可以在 Firefox 和 IE 中使用。

【讨论】：

对不起，我在 jsFiddle 示例中发布了旧版本的代码。现在更新了。
这是我将 $(document) 更改为 $('body') 的更新示例。同样的问题。在 IE7 或 IE8 中不起作用。 jsfiddle.net/HVhLw/23
@Chris 我认为您当前的 jsFiddle 将无法工作，因为您已将其包装在准备好的文档中（当您选择“onload”时 jsFiddle 不需要）。抱歉，这对我来说可能是一个太多的移动目标。
删除它会导致示例无法正常运行。
@Chris 我们能提供更多细节吗？例如，“运行不正常”是什么意思？

【解决方案2】：

IE7 和 IE8 在固定位置上是不可预测的，除非您声明一个合理的 !DOCTYPE（不确定 IE9，不拥有任何 Win7 机器）。我总是对一切使用 XHTML/1.0 Transitional，但我认为如果您也声明 HTML/4.01，它也应该可以正常工作。

还值得注意的是，使用 XHTML 修复了 IE 将text-align: center; 视为margin-left: auto; margin-right:auto; 并完全忽略margin: auto; 声明的恼人习惯。

别忘了validate you markup。

例如

<?xml version='1.0' encoding='iso-8859-1' ?>
<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>

<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>

  <head>
    ...
  </head>

  <body>
    ...
  </body>

</html>

【讨论】：

我用 Doctype 更新了我的 OP 中的 jsFiddle 示例。当您运行示例时，它没有任何区别。
jsFiddle 示例现在验证 XHTML 过渡。同样的问题。