Question

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

Answer 1

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

有关详情，请参阅Mootools documentation for Browser

Answer 2

也许以下的CSS Hacks会服务：

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

问候！

Answer 3

对于个人提醒，我在jsfiddle上发布了这个小例子： http://www.jsfiddle.net/ghazal/XUXAP/ 也许它会帮助你欢呼声。

Answer 4

2种方式：

服务器端

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

条件样式表

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

准确了解与不同版本相关的条件。

备注

可能最好尝试解决潜在问题，而不是诉诸黑客，因为维护起来会容易得多。另请注意，新版本一直在发布，浏览器版本可能会被欺骗等等。当您无法找到其他解决方案时，它应该仅用于特定的，独立的修复。

Answer 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 {}

Answer 6

不错的问题，首先你可以用CSS添加不同的类，如：

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

然后使用class创建元素但是为空，如：

<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");
       }
      }

我试过，它有效，欢呼！

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

6 个答案: