我想让网站访问者升级浏览器，而不是使用前缀

我想让网站访问者升级浏览器，而不是使用前缀

问题修改后的答案修改

这是实现此目的的唯一CSS方法。

由于CSS

@supports

无法在目标（不需要的）浏览器上运行：Safari7-8，IE<=10，Android浏览器<4.4，适用于Android的UC浏览器和Opera Mini <8，因此在这些浏览器上将显示“
browserupgrade”消息使用此规则。

@supports (display: flex) { .browserupgrade { display: none; }}

有一些浏览器仍然支持非前缀

flex

但不支持

@supports

IE11（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);}