How can I show a message to IE6/IE7 browsers to up

2019-01-16 16:24发布

站内文章 / 后端开发

16 0

女痞

女 | 书童

私信

可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

I want to only allow users with IE8 (not IE6, IE7) or another browser to access my site when logged in.

I followed: http://code.google.com/p/ie6-upgrade-warning/ But I also wanted it to not allow IE7 users to use the main site when logged in (they can view public pages.) The reason is that the main web application has a lot of JavaScript effects that will only work 100% in IE8 rendering mode (or any other browser aside from IE.)

The problem with modifying the ie6 upgrade warning to be ie7 is that it looked like IE8 displayed my webpage in an IE7 rendering mode and "lies" about being ie7 and triggers the IE7 stylesheet code.

So how can I force IE8 to always render my page in IE8 mode?

回答1:

Use this tag:

<meta http-equiv="X-UA-Compatible" content="IE=8" />

回答2:

Correction to AdamSane's example:

回答3:

here is a good link that suggest some solution

http://garmahis.com/tools/ie6-update-warning/

personally i like fourth solution(http://www.browser-update.org/)

just a piece of cake

回答4:

Personally I would recommend users to upgrade IE for security reasons. I would use a conditional comment to target browsers below IE8.

      <!--[if lt IE 8]>You are using an outdated version of Internet Explorer.  For security reasons you should upgrade your browser. Please go to Windows Updates and install the latest version.<![endif]-->

This message should be unobtrusive but graceful. You should also make the website usable for those that cannot upgrade their browsers.

回答5:

Rather than try to force IE 8+ mode, I use a combination of conditional comments and a simple javascript check. The document.documentMode property was added to IE in version 8, so if it exists at all (regardless of value, though it HAS to be 7 with this code) it means we're in compatibility mode and should not show the warning:

<!--[if lte IE 7]>
    <script>
        if (!document.documentMode) { //if documentMode exists, this is a later IE in compatibility mode
            showBadBrowserMessage();
        }
    </script>
<![endif]-->

回答6:

Here is this cool script that works for all old browsers:

<script type="text/javascript"> 
    var $buoop = {vs:{i:7,f:5,o:12,s:5,n:9}}; 
    $buoop.ol = window.onload; 
    window.onload=function(){ 
     try {if ($buoop.ol) $buoop.ol();}catch (e) {} 
     var e = document.createElement("script"); 
     e.setAttribute("type", "text/javascript"); 
     e.setAttribute("src", "//browser-update.org/update.js"); 
     document.body.appendChild(e); 
    } 
</script>

Note: If the visitor ignores the advice, it won't appear again for some time.

More can be found: here

回答7:

Depends on how you've coded your (X)HTML, but IE8 should use standards mode (not IE7 mode) if you have a strict doctype like:

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

at the top of your HTML files.

XHTML 1.0 Specs - Strictly Conforming Documents

Here's a good post about how different doctypes/etc affect IE8's rendering mode: Understanding Compatibility Modes in Internet Explorer 8

回答8:

Probably the best way would be to detect the user's browser User-Agent string and redirect them to a page asking them to upgrade (or download a different browser such as firefox or chrome) if they are using an old version of IE. You can see examples of the user agents of IE 7 and 8 on this IE developer blog entry. Older versions of IE follow a similar pattern.

One thing you should not do, however, is assume that any user agent string not following a certain pattern is invalid. Just check for MSIE ([0-9]) and see if it's in range; if it's missing entirely, assume the browser is supported. If it's MSIE 7, then further check for the Trident marker indicating compatiblity mode (and, I suppose, ask the user to turn it off). This will allow for other, future upstart browsers to have a fighting chance at rendering your page without turning them away at the door :)

回答9:

As has been mentioned I'd suggest the best way to achieve this is to use conditional comments to include a stylesheet specific to all versions of IE earlier than 8:

<!--[if lt IE 8]> Include CSS here <![endif]-->

The included CSS could set a warning to be visible or perhaps enable an overlay on the page which 'locks' users out. It might be a good idea to include some rules which hide important elements on the page which could otherwise confuse the user if they do not work as intended.

Your other option is to redirect the user to another page - I'm not a huge fan of redirects but if used with care they can be a suitable solution.

Have you considered why you're locking a large amount of users out of your site? Maybe you should take the time to work out how to either gracefully degrade your JavaScript, or the other way around; 'progressively enhance' with JavaScript.

On the other hand, you might have control over the systems used by the organisation using your site in which case you're probably OK locking people out for using non-standard systems.

回答10:

You can use CSS Conditional Comments

<!--[if IE 8]>
Special instructions for IE 6 here
<![endif]-->

回答11:

Using javascript you can ask which browser have sent the request>

<script type="text/javascript">
function detectBrowser()
{
var browser=navigator.appName;
var b_version=navigator.appVersion;
var version=parseFloat(b_version);
if (browser=="Microsoft Internet Explorer")
  && (version>=8))
  {
  alert("Your browser is good enough!");
  }
  else
  {
  alert("It's time to upgrade your browser!");
  }
  }
 </script>

回答12:

Is this party over? ><

It is, but I think the information here can be updated a bit.

By today's standards, "today" being October 29 of 2013, you can use this meta tag to trigger the latest IE Browser and Document modes and trigger the installation of Google's Chrome Frame in older IEs:

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

This allows you to server specific IE6/7 styles. Keep in mind that I'm saying 'styles' not 'style sheets', meaning: You'd only use a single CSS file and in it are all your IE6 and IE7 styles. This is to minimize HTTP requests... but that's a totally different conversation.

Anyway, with the above snippet there's no need for scripts or Conditional Comments.

Note: Google Chrome Frame will be retired in January 2014 - more info here.

回答13:

The very idea that you're "banning" IE 6 and 7 users from your website is ridiculous. A lot of people can't upgrade their browser or install another one because of work restrictions or because they don't know how. Barring these people from using your site will just cost you users in the long run.

Either fix your JavaScript, work around the problems or gracefully degrade so that the site will work well even if it's turned off.

EDIT: I posted some more information in a comment below which should really be in this post:

It's often possible to detect IE and work around it. Hell, you can even use conditional comments to load a different version of the JavaScript. Using a JS framework will abstract away the differences between browsers to a level you don't need to worry about. Or just grab IE7.js and stick that on the site - I hear it gets things working like you wouldn't believe.