如何调用基于浏览器的css？答案

【问题标题】：how to call browser based css?如何调用基于浏览器的css？
【发布时间】：2018-05-24 05:18:40
【问题描述】：

我们可以从 javascript 中获取浏览器名称，但是有什么方法可以相应地更改 css。我的意思是某些类 css 文件，因为我不想链接另一个 css 文件，我想在
if chrome 上编写样式

 a img
{
margin:0;
}

//if mozila

a img
{
margin:5px;
}

【问题讨论】：

请注意，随着浏览器的呈现特性随着时间的推移而发生变化，这类黑客很难维护。我会尽力避免它们。

标签： html css

【解决方案1】：

可能是这样的

body.chrome a img
{
margin:0;
}

body.mozilla a img
{
margin:5px;
}

然后根据需要使用Javascript在body上设置一个类。

【讨论】：

【解决方案2】：

有两种方式：

客户端：需要使用Javascript检测浏览器并导入合适的CSS样式。看看这篇文章。（链接不再可用）

服务器端：您需要detect 用户代理并提供相应的 HTML。这是一个PHP source 链接。

【讨论】：

【解决方案3】：

你可以去：

【讨论】：

【解决方案4】：

你描述的是conditional CSS（或者对于IE，conditional comments）。

【讨论】：

【解决方案5】：

我过去曾通过条件包含做到这一点。从header中检测浏览器，然后根据条件包含一个.css文件

【讨论】：

【解决方案6】：

使用 Mozilla 扩展的 URL 前缀：

@-moz-document url-prefix() {
  a img {
    margin:5px;
  }
}

【讨论】：

使用 Mozilla 扩展的 url 前缀。 r.

【解决方案7】：

我用这个：

let userAgent = navigator.userAgent;
let b = "";
if(userAgent.indexOf("Firefox") > -1){
    b = "firefox";
}
if(userAgent.indexOf("Chrome") > -1){
    b = "chrome";
}

let styles = document.createElement('link');
styles.rel = "stylesheet";
styles.type = "text/css";
styles.media = "screen";
styles.href = "css/options." + b + ".css";
document.getElementsByTagName('head')[0].appendChild(styles);

【讨论】：

【解决方案8】：

你可以用js检测浏览器版本。并链接正确的css文件。

对于 IE 你可以使用

有时我会使用 -moz-CSS_ATTRIBUTE für Mozila，但并非每次都有效。

我认为 JS 是最好的解决方案

【讨论】：