Question

我正在开发一个引导程序，它在IE 11，Edge，Chrome中的呈现略有不同......这是次要的东西（按钮大小，边距很小），但我只能针对一个浏览器进行优化。他们中没有一个看起来糟糕，但只有其中一个看起来很完美。

有没有办法使用HTML，CSS，JavaScript，Bootstrap，巫术....告诉不同的浏览器以不同的方式呈现内容？

注意：从版本9开始，条件注释在IE中不起作用。

Answer 1

你可以使用javascript

navigator.sayswho= (function(){
    var ua= navigator.userAgent, tem,
    M= ua.match(/(opera|chrome|safari|firefox|msie|trident(?=\/))\/?\s*(\d+)/i) || [];
    if(/trident/i.test(M[1])){
        tem=  /\brv[ :]+(\d+)/g.exec(ua) || [];
        return 'IE '+(tem[1] || '');
    }
    if(M[1]=== 'Chrome'){
        tem= ua.match(/\b(OPR|Edge)\/(\d+)/);
        if(tem!= null) return tem.slice(1).join(' ').replace('OPR', 'Opera');
    }
    M= M[2]? [M[1], M[2]]: [navigator.appName, navigator.appVersion, '-?'];
    if((tem= ua.match(/version\/(\d+)/i))!= null) M.splice(1, 1, tem[1]);
    return M.join(' ');
})();

从：https://stackoverflow.com/a/2401861/4337247

Answer 2

我建议使用一个使用JavaScript来检测用户浏览器的插件，并且您可以根据需要编写特定于每个浏览器的CSS。

这是一款流行的浏览器检测插件：
https://github.com/gabceb/jquery-browser-plugin

以下是您的代码可能类似的示例：

<style type="text/css">
#browsername {
    color: #fff;
    padding: 10px;
    text-transform: capitalize;
}
.firefox #browsername, .chrome #browsername {
    background: #f00;
}
.chrome #browsername {
    background: #357;
}
.msie #browsername {
    background: #00f;
}
.safari #browsername {
    background: #0f0;
}
.opera #browsername {
    background: #000;
}
.iphone #browsername {
    background: #ccc;
    color: #000;
}
</style>
<div id="browsername">
    <script>document.write($.browser.name + ' browser ' + $.browser.versionX + 'x' + '.');</script>
    <script>document.write($.layout.name + ' layout engine ' + $.layout.version + '.');</script>
</div>

代码示例来自：http://jquery.thewikies.com/browser/

有没有办法告诉bootstrap 3在现代浏览器中呈现不同的东西？

2 个答案: