问题修改后的答案修改
这是实现此目的的唯一CSS方法。
由于CSS
@supports无法在目标（不需要的）浏览器上运行：Safari7-8，IE<=10，Android浏览器<4.4，适用于Android的UC浏览器和Opera Mini <8，因此在这些浏览器上将显示“
browserupgrade”消息使用此规则。
@supports (display: flex) { .browserupgrade { display: none; }}有一些浏览器仍然支持非前缀
flex但不支持
@supportsIE11（1）和OperaMini8，但是幸运的是，我们可以使用一些CSS特定规则来解决它们。
_:-ms-fullscreen, :root .browserupgrade { display: none; }:-o-prefocus, .browserupgrade { display: none; }这是完整的代码，显示针对您的目标浏览器的升级消息。
CSS
.browserupgrade { display: block; }_:-ms-fullscreen, :root .browserupgrade { display: none; }:-o-prefocus, .browserupgrade { display: none; }@supports (display: flex) { .browserupgrade { display: none; }}HTML
<div > <p>You are using an outdated browser. Please <a href="http://browsehappy.com/"> upgrade your browser</a> to improve your experience.</p></div>
（1）：IE 11 CSS规则也应该适用于IE Mobile 11，尽管还没有人对其进行测试。
此外，如果要自动重定向这些浏览器，可以使用一个小脚本，在延迟10秒后执行此操作。
var el = document.querySelector('.browserupgrade');if (window.getComputedStyle(el,null).getPropertyValue("display") != 'none') { setTimeout(function(){ window.location = 'http://browsehappy.com/'; }, 10000);}
