相关疑难解决方法(0)

我正在使用CSS flexbox重建网站.

在检查浏览器兼容性时,我发现所有现代浏览器都支持flexbox,但Safari 8和IE 10需要供应商前缀.

在检查Google Analytics时,我发现过去6个月内96%的网站访问者使用完全支持flexbox的浏览器.其余4%使用需要前缀或不提供支持的浏览器.

由于我们讨论的是4%的用户,并且数量会越来越小,(我希望尽可能保持我的代码干净简单),我考虑不使用前缀,而是要求用户升级他们的浏览器.

如何定位旧浏览器以向用户显示要求他们更新浏览器的消息？

这是我到目前为止所拥有的:

<!--[if IE]>
    <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>
<![endif]-->

这个IE条件评论涵盖了IE版本6,7,8和9.

这些访问者将收到一条警报,其中包含下载当前浏览器的链接.但是,Microsoft已停止支持从IE10开始的条件评论.

现在我需要类似的东西:

• IE 10
• Safari 7-8
• Opera Mini <8
• 适用于Android的UC浏览器
• Android浏览器<4.4

是否有一个简单的JS/jQuery脚本来处理这个工作？或另一种轻量级方法？

解

感谢所有的答案.很明显,有很多方法可以解决这个问题(Modernizr,PHP,jQuery函数,普通的Javascript,CSS,browser-update.org等).这些方法中的许多方法都能完全有效地完成这项工作.

我选择了最简单的一个:CSS(信用卡@LGSon).

除了IE <= 7之外,这个CSS基本上涵盖了所有目标浏览器.

.browserupgrade { display: block; }
_:-ms-fullscreen, :root .browserupgrade { display: none; }
:-o-prefocus, .browserupgrade { display: none; }
@supports (display: flex) { …

我有一些代码:

$("#" + this.id).css("border-radius",this.radius + "px");
$("#" + this.id).css("-moz-border-radius",this.radius + "px");
$("#" + this.id).css("-webkit-border-radius",this.radius + "px");

我试图通过使用JSON来应用它们(如jQuery的文档中所示)或通过完全删除供应商前缀版本来改进这样的行.

.css()在更改元素的CSS属性时,jQuery的方法是否会自动应用任何所需的供应商前缀？

......是一个巨大的痛苦.

var transform = 'translate3d(0,0,0)';
elem.style.webkitTransform = transform;
elem.style.mozTransform = transform;
elem.style.msTransform = transform;
elem.style.oTransform = transform;

有没有图书馆/框架/更好的方法来做到这一点？最好只用一行JS？