css fix для различных браузеров

Представьте себе абстрактный разговор абстрактного заказчика с абстрактным верстальщиком.

— У тебя бага в менюшке, все наверх съехало, — говорит заказчик.
— Посмотрел во всех браузерах, нету! Ты в каком смотришь? — говорит верстальщик.
— В фаерфоксе.
— Нормально все там, — говорит верстальщик, просмотрев сайт во всех версиях фаерфокса.
— Осталось бага. Если это важно, то я с мака.

Обидно наверное…

Не так давно, перебирая файлы со старого харда, обнаружил там небольшой архив яваскриптов. Ну а в нем (в архиве), я обнаружил весьма полезный скриптик, призванный исправить баги верстки во всех браузерах.

Собственно исходник:

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: Исходник без 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(" "));
}();

А теперь о том, как этим скриптом пользоваться.
Первое, что нужно сделать — вставить скрипт на страницу :) Далее правим только 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 */

Посмотреть

PS: Надеюсь, хоть кому-нибудь будет интересно, первый пост все-таки.

PPS: Если уже писали об этом скрипте, скажите — уберу статью.