Глобальный фикс для всех браузеров и ОС
Данный способ предлагает фиксить баги с помощью небольшого js-скриптика буквально на 36 строк )
Итак, в шапку вставляем скрипт:
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('chrome')?'gecko chrome'
: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(" "));
}();
Теперь в стилях мы можем задавать каждому селектору свой фикс для определенного браузера и даже ОС.
Доступные ОС:
- win – Windows
- linux – Linux
- mac – MacOS
Доступные браузеры:
- ie – все версии ИЕ
- ie8 – ИЕ 8.х
- ie7 – ИЕ 7.x
- ie6 – ИЕ 6.x
- ie5 – ИЕ 5.x
- gecko – все версии фаерфокса, и остальные гекко-браузеры
- ff2 – фаерфокс 2
- ff3 – фаерфокс 3
- chrome – google chrome
- opera – все версии оперы
- opera8 – опера 8.x
- opera9 – опера 9.x
- konqueror – konqueror
- safari – сафари
Пример использования:
.os.browser .class{background:#ddd;}Конкретный пример:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="en">
<head>
<style>
.test {
width:100px;
height:100px;
background:red;
}
.win.ff3 .test {
background:#ddd;
}
</style>
<script type="text/javascript">
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('chrome')?'gecko chrome'
: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(" "));
}();
</script>
</head>
<body>
<div class="test"></div>
</body>
</html>
upd 17.05.2010 добавлен google chrome
* Автор сего скрипта k0rzhik
Tweet
БлОг кРеАт�вНоГо КоТа
Блог Nubic’а
Форум о Shop-Script'е
Комментарии
Код интересен, но возник вопрос:
А как прописать определение google chrome?
Заранее спасибо!
должно сработать, если указать safari
не помогает
тогда отсюда берите css-хак
http://makexhtml.ru/2009/fiksy-dlya-brauzerov/