English 中文(简体)
解决两个IE6布局错误
原标题:
  • 时间:2008-11-25 20:21:59
  •  标签:

我的网页遭遇了两个IE6渲染错误。它们每一个都有解决方法,但不幸的是这些解决方法彼此不兼容。

这是一个最小化的测试用例。在Firefox / Safari中的行为是期望/正确的。IE7是未知的,因为我现在无法访问它。

第一个 bug:#content 具有 overflow:auto 并包含具有相对定位的 div。 IE6 错误地使相对定位的 div 具有固定外观。 解决方法:在 #content 上设置 position:relative。

第二个错误:页面有时会显示模态弹窗。弹窗和背景的z-index非常高,以防止背景被干扰。这在#content上设置position:relative时效果很好,但这会导致IE6将z-index属性完全错误处理。

我该如何让这些错误和谐地相互配合?(注意:远程格式化仍在运行IE6的用户的硬盘不是一个选项,这让我感到沮丧。)

编辑:这里有第二个测试案例,展示了当我将位置属性设为相对于内容时会发生什么。第一个bug(解决了#content-header的外观问题)被解决了,但它会导致z-index bug出现,并且破坏了模态背景。

问题回答

有许多实现方法可以避免ie6(甚至更低版本)符合性带来的大量问题。唯一一个实际对我起作用的(甚至很大程度上)是迪恩爱德华的解决方案。

尝试将以下一行插入到您的主标题中:

<!--[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中加载。

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

实施类似我们在Ra-Ajax.org所做的(提示,在IE中访问该网站 ;)

严肃点说,甚至prototype.js和37signals现在也停止支持IE6了,我认为是时候前进了。

我认为使用图书馆并不是一个惩罚,而是为了减少我在处理荒谬的IE漏洞方面的时间。

我们最终使用了bgiframe jquery插件(http://plugins.jquery.com/project/bgiframe)。它在一个库中实现了iframe“护盾”技术。我认为让IE6用户多下载一点库的代价(实际上并不是很多),来避免我为IE6 bleedthru疯狂,是值得的。

附言:我认为全球网站开发人员应该发起集体诉讼,强制微软公司提供 IE6 和 IE7 的 Firebug 等效工具,确保所有 IE6 和 IE7 实例都升级到标准版本,或从互联网上的所有计算机中移除所有 IE6 和 IE7 版本,或向所有网站开发人员支付1百万美元来赔偿他们的痛苦和苦难!

虽然这可能不是正确的解决方案,而且也有可能过于复杂,但是jQuery可以做类似这样的模态弹出窗口,并且在IE6上也可以使用。我可能会因为这么简单的答案而遭到反对票,但是在重新发明轮子之前,考虑或至少查看其他解决方案仍然是值得的。





相关问题
热门标签