使用功能检测而不是用户代理测试来测试 IE6答案

【问题标题】：Test for IE6 using feature detection instead of user agent testing使用功能检测而不是用户代理测试来测试 IE6
【发布时间】：2011-06-26 07:31:56
【问题描述】：

我将 html5boilerplate 与 Modernizr 库一起使用。我的应用程序是使用 jQuery 构建的。 Modernizr 和 jQuery 都内置了特征检测，但我的理解是 Modernizr 更完整。我打算使用 Modernizr 进行特征检测，除非有充分的理由为此使用 jQuery。

我的应用程序仅适用于更现代的浏览器（例如 IE7+、Firefox、Chrome、Safari 和更新的 Opera），但它在 IE6 中仍然可以使用。如果用户使用的是 IE6 等较旧的浏览器，我想确保用户看到一个很大的警告。如果他们还没有使用 Chrome 或其他一些兼容 HTML5 的浏览器，我还想显示升级到 Chrome 或其他一些兼容浏览器的“建议”。

我不想使用用户代理测试。

是否有我应该测试的特定功能列表以确定用户是否使用 IE6？
是否有我应该测试的特定功能列表以确定用户是否使用相当兼容的 HTML5 浏览器（Chrome、Safari、IE9 等）进行浏览

【问题讨论】：

仅供参考，大胖警告很烦人。大多数使用 IE6 的人别无选择，要么是因为他们不知道如何使用不同的浏览器，要么是没有访问权限。
但是，也许一个不显眼的小警告可以帮助那些可以使用更好的浏览器的人。
@Gabe，我同意这样的警告可能很烦人。但在这种情况下，应用程序甚至无法运行，甚至不会显示给用户。我想在其位置显示一条消息，以便页面不只是空白，其中一些可能尝试下载 Chrome 或其他东西。
当您说“它在 IE6 中仍然可以工作”时，我认为您的意思是 IE6 用户仍然可以使用它。如果没有，那么您将显示错误消息而不是警告。
@Gabe：啊，很抱歉造成混乱。我的意思是应用程序的一部分仍然可以工作，但不是全部在 IE6 中。所以我不希望 IE6 用户使用任何应用程序而只看到一条消息。感谢您的帮助！

标签： javascript jquery html feature-detection modernizr

【解决方案1】：

您说您正在使用 HTML5Boilerplate。在 index.html 的最顶部是这样的：

<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7 ]> <html lang="en" class="no-js ie6"> <![endif]-->
<!--[if IE 7 ]>    <html lang="en" class="no-js ie7"> <![endif]-->
<!--[if IE 8 ]>    <html lang="en" class="no-js ie8"> <![endif]-->
<!--[if IE 9 ]>    <html lang="en" class="no-js ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="en" class="no-js">

所以使用 jQuery，计划旧的 javascript 甚至 css 来简单地测试 html 上是否存在 ie6 类。

<style>
.upgrade-notice { display: none; }
.ie6 .upgrade-notice { display: block; }
</style>

<div class="upgrade-notice"><h1>Please upgrade your browser</h1></div>

【讨论】：

噢！如此明显，不敢相信我错过了。谢谢！

【解决方案2】：

使用条件 cmets 进行 IE 版本测试。

<!--[if lt IE 7]><script>window.location='/main/unsupported_browser';</script><![endif]-->

至于其余部分，您应该只测试您使用的功能并且仅在您使用它们时进行测试。这样您就可以优雅地降级，并且不会意外阻止正常工作的浏览器。

【讨论】：