How to change CSS styling depends on the browser

问题

I know there's a browser detection in mootools. Therefore, I want to know how to change the CSS styling depends on browser? -v-

回答1:

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

For more see Mootools documentation for Browser

回答2:

Perhaps the following CSS Hacks will serve:

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

Regards!

回答3:

for a personal reminder, I posted this small example on jsfiddle : http://www.jsfiddle.net/ghazal/XUXAP/ Maybe it'll help you Cheers.

回答4:

2 ways:

Server Side

Detect user agent string and serve the associated style sheet during page generation.

Conditional Style Sheets

This is only served to IE (all versions)

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

Take a look at:

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

For conditions related to different versions precisely.

Notes

Probably best to attempt to fix the underlying problem rather than resort to hacks as it will be a lot easier to maintain. Also be aware new versions are being released all the time, browser versions can be spoofed, etc etc. It should really only be used for specific, isolated fixes when you can't find another solution.

回答5:

Browser detection is needed only for older versions of IE, if there are problems in other modern browsers then it is probably developer fault.

One way is server side check:

// 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;
};

Another way is by using conditional comments in 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]-->

Then the regular css style will look like this:

.somestyle {}

And the fallback style in ie.css will look like:

.ie .somestyle {}

回答6:

Nice question, first you can add different classes with CSS like:

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

Then make element with class but empty, like:

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

Then in script part, you can add the following for check the browser:

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

I tried and it works, cheers!

来源：https://stackoverflow.com/questions/4345671/how-to-change-css-styling-depends-on-the-browser

标签

css

browser

mootools