css fix for various browsers

Imagine the abstract conversation of an abstract customer with an abstract coder.

“You have a bug in the menu, everything has moved up,” says the customer.
- Looked in all browsers, no! What are you looking at? - says layout designer.
- In firefox.
“Everything is fine there,” says the coder, viewing the site in all versions of firefox.
- There is a bug. If this is important, then I'm with poppy.

It's a shame probably ...

Not so long ago, going through the files from the old hard, I found a small archive of javascripts there. Well, in it (in the archive), I found a very useful scripter, designed to fix layout bugs in all browsers.
')
Actually source:

  var cssFix = function () {
   var u = navigator.userAgent.toLowerCase (),
   is = function (t) {return (u.indexOf (t)! = - 1)};
   $ ("html"). addClass ([
     (! (/ opera | webtv / i.test (u)) && / msie (\ d) /. test (u))? ('ie ie' + RegExp. $ 1)
       : is ('firefox / 2')? 'gecko ff2'
       : is ('firefox / 3')? 'gecko ff3'
       : is ('gecko /')? 'gecko'
       : is ('opera / 9')? 'opera opera9': / opera (\ d) /. test (u)? 'opera opera' + RegExp. $ 1
       : is ('konqueror')? 'konqueror'
       : is ('applewebkit /')? 'webkit safari'
       : is ('mozilla /')? 'gecko': '',
     (is ('x11') || is ('linux'))? '  linux '
       : is ('mac')? '  mac '
       : is ('win')? '  win ':' '
   ] .join (''));
 } (); 

upd: Source without jQuery

  var cssFix = function () {
   var u = navigator.userAgent.toLowerCase (),
   addClass = function (el, val) {
     if (! el.className) {
       el.className = val;
     } else {
       var newCl = el.className;
       newCl + = ("" + val);
       el.className = newCl;
     }
   },
   is = function (t) {return (u.indexOf (t)! = - 1)};
   addClass (document.getElementsByTagName ('html') [0], [
     (! (/ opera | webtv / i.test (u)) && / msie (\ d) /. test (u))? ('ie ie' + RegExp. $ 1)
       : is ('firefox / 2')? 'gecko ff2'
       : is ('firefox / 3')? 'gecko ff3'
       : is ('gecko /')? 'gecko'
       : is ('opera / 9')? 'opera opera9': / opera (\ d) /. test (u)? 'opera opera' + RegExp. $ 1
       : is ('konqueror')? 'konqueror'
       : is ('applewebkit /')? 'webkit safari'
       : is ('mozilla /')? 'gecko': '',
     (is ('x11') || is ('linux'))? '  linux '
       : is ('mac')? '  mac '
       : is ('win')? '  win ':' '
   ] .join (""));
 } ();

And now about how to use this script.
The first thing to do is to insert the script on the page :) Next, we only edit CSS.

Now we have additional css selectors, namely OS and browser. That is, the design will look like this:

. [OS]. [Browser] css selector

Axis selectors:

.win - Windows
.linux - Linux
.mac - MacOS

Browser selectors:

.ie - all versions of IE
.ie8 - IE 8.x
.ie7 - IE 7.x
.ie6 - IE 6.x
.ie5 - IE 5.x
.gecko - all versions of firefox, and other gecko browsers
.ff2 - firefox 2
.ff3 - firefox 3
.opera - all versions of opera
.opera8 - opera 8.x
.opera9 - opera 9.x
.konqueror - konqueror
.safari - safari

Returning to the abstract situation with firefox on a poppy, the solution will be:

.mac.gecko selector {/ * fixed code * /}
or
.mac.ff2 (3) selector {/ * fixed code * /}

It is worth noting the priorities of selectors. Let us consider the example of FF3:

.win.ff3 #id {background: #aaa} / * 1 * /
.win.gecko #id {background: # f00} / * 2 * /
.ff3 #id {background: # 333} / * 3 * /
.gecko #id {background: # 00f} / * 4 * /
.win #id {background: # ff0} / * 5 * /

Look

PS: I hope at least someone will be interested, the first post after all.

PPS: If you have already written about this script, tell me - I will remove the article.