logo标签列表

如何根据浏览器更改CSS样式

cssbrowsermootools
3

我知道mootools中有浏览器检测的功能。因此，我想知道如何根据浏览器更改CSS样式？ -v-

1
有一个类似的问题：https://dev59.com/91LTa4cB1Zd3GeqPZU43 - meo
不应该进行浏览器检测，因为无法保证您得到正确的响应，而且一些浏览器可以欺骗用户代理。相反，使用特性检测。然而，大多数现代浏览器不需要特殊的CSS。只有IE需要这样的技巧，但这就是他们创建“条件注释”的原因。 - Rob
6个回答
2
0
0
0

有两种方法：

服务器端

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

条件样式表

仅适用于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/

针对不同版本的情况，需要精确处理。

注释

最好尝试修复根本问题而不是采取hack方法，因为这样更容易维护。此外，请注意，新版本正在不断发布，浏览器版本可能被欺骗等等。当您找不到其他解决方案时，确实只应将其用于特定的、孤立的修复。

0

浏览器检测仅适用于旧版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中使用条件注释：

<!--[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 {}
0

好问题，首先你可以使用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");
       }
      }

我试过了，它可以正常工作，干杯！

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接