如何更改 CSS 样式取决于浏览器答案

【问题标题】：How to change CSS styling depends on the browser如何更改 CSS 样式取决于浏览器
【发布时间】：2021-04-18 20:20:10
【问题描述】：

我知道 mootools 中有浏览器检测功能。因此，我想知道如何改变 CSS 样式取决于浏览器？ -v-

【问题讨论】：

有类似的问题：stackoverflow.com/questions/4323186/browser-os-as-body-class
不应进行浏览器检测，因为无法保证您得到正确的响应，并且某些浏览器可能会欺骗用户代理。相反，使用特征检测。然而，大多数现代浏览器不需要为它们提供特殊的 CSS。只有 IE 需要这样的 hack，但这就是他们创建“条件 cmets”的原因。

【解决方案1】：

if ( Browser.chrome ) { document.id('foo').addClass('bar'); }

更多信息请见Mootools documentation for Browser

【讨论】：

【解决方案2】：

也许以下 CSS Hacks 会起作用：

http://www.cssblog.es/hacks-css-mediante-selectores/

问候！

【讨论】：

【解决方案3】：

作为个人提醒，我在 jsfiddle 上发布了这个小例子： http://www.jsfiddle.net/ghazal/XUXAP/ 也许它会帮助你干杯。

【讨论】：

【解决方案4】：

两种方式：

服务器端

在页面生成期间检测用户代理字符串并提供相关的样式表。

条件样式表

这仅提供给 IE（所有版本）

<!--[if IE]>
        <link rel="stylesheet" type="text/css" href="all-ie-only.css" />
<!--<![endif]-->

看看：

http://css-tricks.com/how-to-create-an-ie-only-stylesheet/

对于与不同版本相关的条件。

备注

最好尝试解决根本问题，而不是求助于黑客，因为这样会更容易维护。另请注意，新版本一直在发布，浏览器版本可能会被欺骗等等。它应该只用于特定的、孤立的修复，当您找不到其他解决方案时。

【讨论】：

【解决方案5】：

浏览器检测仅适用于旧版本的 IE，如果其他现代浏览器出现问题，则可能是开发人员的错误。

一种方法是服务器端检查：

// returns true on at least a minimal version of IE, or if is not IE
function checkIEVersion( minimal ) {
    var ver = true;
    if ( navigator.appName == 'Microsoft Internet Explorer' ) {
        var ua = navigator.userAgent;
        var re  = new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})");
        if (re.exec(ua) != null) ver = parseFloat( RegExp.$1 ) >= minimal;
    }
    return ver;
};

另一种方法是在 html 中使用conditional comments：

<!--[if lt IE 9]><html class="ie"><![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--><html><!--<![endif]-->    

<!--[if lt IE 9]>
<script src="js/html5.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="css/ie.css">
<![endif]-->

那么常规的css样式会是这样的：

.somestyle {}

ie.css 中的后备样式将如下所示：

.ie .somestyle {}

【讨论】：

【解决方案6】：

好问题，首先您可以使用 CSS 添加不同的类，例如：

.color-safari{}
.color-chrome{}

然后用类创建元素但为空，如：

<input id="myID" type="text" name="hi" class="">

然后在脚本部分，您可以添加以下内容以检查浏览器：

     var userAgent = navigator.userAgent.toLowerCase(); 
     if (userAgent .indexOf('safari')!=-1){ 
       if(userAgent .indexOf('chrome')  > -1){
         //browser is chrome
          $("#myID").addClass("color-chrome");
       }else{
        //browser is safari, add css          
          $("#myID").addClass("color-safari");
       }
      }

我试过了，它成功了，干杯！

【讨论】：