如果浏览器是 IE 7 或更低版本，则隐藏正文答案

【问题标题】：Hide body if browser is IE 7 and lower如果浏览器是 IE 7 或更低版本，则隐藏正文
【发布时间】：2016-03-12 17:09:22
【问题描述】：

对于使用 IE 7 或更低版本访问网站的所有用户，我希望显示一条消息并且仅此消息，而不显示 body 或网站的任何其他部分。

在head中有此代码

<head>
    <!-- Target IE 7 EQUAL and LOWER (7, 6, 5, ..) -->
    <!--[if lte IE 7]>        
        <div id="ie7lower">
            <a href="http://browsehappy.com/">
                <p>Click here to update your browser..</p>
            </a>
        </div>
        <style type="text/css">body {display:none;}</style>
    <![endif]-->
</head>
<body>
...

我假设应该显示 div id ie7lower，因为它仍然在 head 中，并且使用内联样式我告诉 body 不要显示。

但是，一旦我使用内联样式，div id ie7lower 也会被隐藏。

可能是 IE 7 及更低版本将head 放在body 内，或者假设head 是body 的一部分，因此div id ie7lower 也不再显示？

基本上，我想为使用 IE 7 及更低版本的用户隐藏甚至不加载整个网站，并简单地向他们显示更新浏览器的消息。如果不用 JavaScript 也能做到这一点，那就太好了。

编辑
在隐藏不显示包装器的页面内容时，这是我想要做的解决方案，这也确实在条件 cmets 中加载了所有其他脚本和 CSS。

尝试尽可能减少 HTTP 请求并快速将 IE 7 和更低版本的用户引导至“更新您的浏览器”消息/页面，我使用 Redirect to another page without loading current page in jquery 将他们重定向到同一域上的最小页面，同时不加载我为 IE 8 和 IE 9 准备的所有额外脚本和 CSS。

<!-- https://stackoverflow.com/questions/33252945/redirect-to-another-page-without-loading-current-page-in-jquery -->
<!--[if lte IE 8]>
    <script type="text/javascript">
        location.replace('ie/outdated.html');
    </script>            
<![endif]-->

如果您的outdated.html 在同一个域中，请注意不要在ie/outdated.html 前面加上/！

如果有人感兴趣，这是“过时 IE”消息/页面的起点。

<html>
    <head>      
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge">       
        <title>Company Name | maximum 64 characters long title</title>
        <meta name="description" content="Site description | maximum 130 chars long description for search engine snippet">
        <!-- http://blog.powermapper.com/blog/post/Page-Title-Length-for-Search-Engines.aspx -->                    
    </head>     
    <body>
        <div id="outdated_container" style="text-align: center; margin: 0 auto;">
            <h1>You are using an <strong>outdated</strong> browser that does not support this website's features.</h1>
            <h1><a href="http://browsehappy.com/">Please upgrade your browser</a> to improve your web experience.</h1>
        </div>
    </body>
</html>

使用这种方法我只是得到

"GET /Domain/ HTTP/1.1" 200 7866
"GET /Domain/ie/outdated.html HTTP/1.1" 200 1017

而不是普通网站对所有浏览器以及 IE 8 和 IE 9 的所有其他 HTTP 请求。

这意味着 JS 必须在 IE 7 及更低版本中默认启用。鉴于现在这很可能是一小部分用户（在禁用 IE 7 和 JS 的情况下上网），我可以接受这种方法。

【问题讨论】：

你真的还有足够的 IE6 / IE7 用户来证明甚至费心告诉他们升级吗？

标签： html css internet-explorer

【解决方案1】：

请不要将应该呈现给用户的内容放在 HTML 头部中。

我建议将所有内容包装在一个包装器中，当浏览器为 IE7 或更低版本时，该包装器会被隐藏。

<head>
  <!--[if lte IE 7]>        
    <style type="text/css">#wrapper {display:none;}</style>
  <![endif]-->
</head>

<body>

<!--[if lte IE 7]>        
  <div id="ie7lower">
    <a href="http://browsehappy.com/">
      <p>Click here to update your browser..</p>
    </a>
  </div>
<![endif]-->

<div id="wrapper">
...
</div>
</body>

【讨论】：

将内容放在 html 头部是不好的做法还是不推荐？我正在尝试减少 IE 7 的负载并尽可能降低，并认为我可以像这样“切断”头部之后的所有内容。你真的知道为什么我的方法不起作用吗？
HTML 标签用于与文档相关的元数据，如标题、字符集、指向 CSS/JS 的链接、页面描述等。它不适用于内容。也许浏览器会在 head 中显示内容，但是这种不好的做法和无效的代码。

【解决方案2】：

在您的脑海中使用某种浏览器检测是可以的。

但放置应该对用户可见的内容却不是。

您需要在正文中对用户可见的部分。

根据您的 cmets 更新：

不确定你指的是什么，但我会同时解决。

您的 div 不会显示在 head 部分，因为它根本不应该是可见部分。
如果它在正文中仍未显示，则说明您有另一个问题。您的 if 语句可能没有取消注释。您可以使用他们的调试工具检查这是一个浏览器，以查看发生了什么。

如果您安装了任何用于浏览器检测的东西，请确保安装正确。

【讨论】：

对于 IE 7 及更低版本来说，将内容放在 html head 中是不好的做法还是不建议这样做？是否有链接或文档或其他内容向我解释为什么 ie7lower div 也没有显示？
@lowtechsun 将 html 内容放在首位更像是一种“从未有过”的事情。但是，您可以链接到头部中的一个 JS 文件，该文件可以为您快速更改页面。 |||关于你的下一点，你能澄清一下吗？比如，为什么 div 在头部或......时不显示？
是的，我的意思是当不显示 body 时，我认为 IE 至少会显示 head 并在 head 内读取 CSS 规则并在之后隐藏 body，同时仍然显示ie7lower div。想到的另一件事是，如果它是 IE 7 或更低版本，我可以重定向到网站上的 domain/ie7 页面，并且只显示消息。像这样我也可以最小化 http 请求，因为我分别有 IE 8 和 9 的 jQuery、respondJS、remJS、html5shiv 和 media.matchJS。好方法？
@lowtechsun 您需要在头部放置一些东西才能将您的 div 放入体内。这可以用 JS 来完成。但在任何情况下，浏览器都不应该显示您的想法。（不看页面源）。如果确实如此，那将是一个非常大的安全问题。
好的，得到您的编辑，ie7lower div 不会显示在head 部分，因为它在 any 浏览器中不可见，而不仅仅是 IE。对于您的第二点，不要不使用任何浏览器嗅探工具，并且 if 语句已正确注释，就像我的问题代码中一样。您如何看待重定向到 IE 7 页面并且仅在不加载我用来支持 IE 8 和 9 的任何额外 JS 时显示消息？

【解决方案3】：

使用此代码隐藏正文...

<!--[if lte IE 7]>  
<style>
    body {
        display:none;
    }
</style>
<![endif]-->

【讨论】：