﻿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(" "));

}();

/*
А теперь о том, как этим скриптом пользоваться.
Первое, что нужно сделать — вставить скрипт на страницу :) Далее правим только CSS.

Теперь у нас в рапоряжении есть дополнительные css селекторы, а именно ОС и браузер. То есть, конструкция будет выглядеть так:

    .[ОС].[Браузер] css селектор


Селекторы ОСи:

    .win - Windows
    .linux - Linux
    .mac - MacOS


Селекторы браузеров:

    .ie - все версии ИЕ
    .ie8 - ИЕ 8.х
    .ie7 - ИЕ 7.x
    .ie6 - ИЕ 6.x
    .ie5 - ИЕ 5.x
    .gecko - все версии фаерфокса, и остальные гекко-браузеры
    .ff2 - фаерфокс 2
    .ff3 - фаерфокс 3
    .opera - все версии оперы
    .opera8 - опера 8.x
    .opera9 - опера 9.x
    .konqueror - konqueror
    .safari - сафари

*/
//Возвращаясь в абстрактной ситуации с фаерфоксом на маке, решение будет такое:
//
//    .mac.gecko селектор{/* исправленный код */}
//    или
//    .mac.ff2(3) селектор{/* исправленный код */}
//
//
//Стоит отметить приоритеты селекторов. Разберем на примере ФФ3:
//
//    .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 */

