css - 解决两个 IE6 布局错误

Question

我的网页存在两个 IE6 呈现错误。他们每个人都有变通办法，但不幸的是，这些变通办法彼此不兼容。

Here's a minimized test case . Firefox/Safari 中的行为是期望的/正确的行为。 IE7 未知，因为我现在无法访问它。

第一个错误:#content 有 overflow: auto 并且包含一个相对定位的 div。 IE6 incorrectly gives the relatively-positioned div a 'fixed' appearance.解决方法:设置 position: relative on #content。

第二个错误:页面有时会显示模态弹出窗口。弹出窗口和背景上的 z-index 设置得非常高，以阻止与它们后面的任何内容进行交互。这工作正常，直到我在#content 上设置 position:relative，这使得 IE6 treat the z-index property completely wrong .

我怎样才能让这些错误彼此很好地相处？ (注意:无法远程格式化仍在运行 IE6 的用户的硬盘驱动器，这让我很沮丧。)

编辑: Here's a second test case这显示了当我应用 position: relative 到内容时会发生什么。第一个错误(#content-header 的“固定”外观)已解决，但它会导致 z-index 错误启动并弄乱模态背景。

Answer 1

关于如何避免 ie6(及更低版本)一致性的大量问题，有无数的实现。唯一真正对我有用(甚至在很大程度上)的方法是 Dean Edward 的解决方案。

尝试在您的主标题中插入以下行:

<!--[if lt IE 8]><script src="http://ie7-js.googlecode.com/svn/version/2.0(beta)/IE7.js" type="text/javascript"></script><![endif]-->

-- 看看接下来会怎样(以及您还需要处理什么，因为它可能无法解决所有问题)。

脚本大小只有30kb，只能在ie6和ie7下加载。

谷歌代码 url 是(显然)http://code.google.com/p/ie7-js/