这是实现此目的的唯一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特定规则来解决它们。
/* IE 11 */
_:-ms-fullscreen, :root .browserupgrade { display: none; }
/* Opera Mini 8 */
:-o-prefocus, .browserupgrade { display: none; }
CSS
.browserupgrade { display: block; }
/* IE 11 */
_:-ms-fullscreen, :root .browserupgrade { display: none; }
/* Opera Mini 8 */
:-o-prefocus, .browserupgrade { display: none; }
/* all modern browsers */
@supports (display: flex) { .browserupgrade { display: none; }}
HTML
<div class="browserupgrade">
<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);
}
602392714
清零编程群