CSS 半固定元素 - 后续问题答案

【问题标题】：CSS Semi-fixed Element - follow-up questionCSS 半固定元素 - 后续问题
【发布时间】：2010-10-07 14:38:27
【问题描述】：

这是来自该线程的后续问题： CSS Semi-fixed Element?

我实现了 kelso 的解决方案，它在 Firefox 和 Chrome 上完美运行。但是，IE 8 并没有发挥作用。

我已经推出了代码，以便您可以在实时网站上看到我遇到的问题： Gran Via hotels

IE 正在监听滚动事件，但在用户向下滚动页面时并未移动 div。似乎以下行在 IE 中没有做任何事情：

d.css({ position: "fixed", top: "0px"   });

第一行在 IE 中也是 -2，而在 Firefox 中是 377。

var scrollerTopMargin = $("#scroll-container").offset().top;

我不是 CSS 专家，我一直在努力解决这个问题。必须有一个简单的解决方案！请帮忙！

谢谢本

【问题讨论】：

【解决方案1】：

IE 不喜欢您的 doctype，并且在 quirks 模式下运行。这就是它不起作用的原因。

试试这个，看看它是否有效：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

【讨论】：

感谢 Alin，更改为该 doctype 有效，但 validator.w3.org 报告 402 页面错误（页面当前有两个错误）。 4.01 strict 只给出 15 个错误，所以继续这样做：
感谢 Alin，更改为该 doctype 有效，但 validator.w3.org 报告 402 错误（过渡 HTML 有 2 个错误）。使用 4.01 strict 只会产生 15 个错误。向下滚动页面时，div 移动正常，但是当我滚动回页面顶部时，div 覆盖了标题，因为 "var scrollerTopMargin = $("#scroll-container").offset().top;"线路返回 -2... 有什么想法吗？

【解决方案2】：

要在标准模式下运行 IE8，您需要选择严格的文档类型，而不是过渡性的

【讨论】：