2010-12-03 4 views
1

Я знаю, что есть обнаружение браузера в mootools. Поэтому, я хочу знать, как изменить стиль CSS зависит от браузера? -v-Как изменить стиль CSS зависит от браузера

+1

был похож на: http://stackoverflow.com/questions/4323186/browser-os-as-body-class – meo 2010-12-03 12:50:58

+0

Обнаружение браузера не должно быть сделано, потому что нет гарантий, что вы получите правильный ответ, а некоторые браузеры могут обмануть пользовательский агент. Вместо этого используйте функцию обнаружения. Тем не менее, большинству современных браузеров не нужен специальный CSS, который им кормит. Только IE требует таких хаков, но именно поэтому они создали «условные комментарии». – Rob 2010-12-03 13:21:48

ответ

0

для личного напоминания, я отправил этот небольшой пример на jsfiddle: http://www.jsfiddle.net/ghazal/XUXAP/ Может быть, это поможет вам Приветствия.

+0

большое спасибо! ^^ – 2010-12-05 11:50:13

0

2 способа:

Server Side

Detect строка агента пользователя и служить соответствующую таблицу стилей во время генерации страницы.

Условные стилей

Это только служит для IE (все версии)

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

Взгляните:

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

Для условий, связанных с различными версиями точно.

Примечания

Вероятно, лучше всего, чтобы попытаться устранить причину проблемы, а не прибегать к взломам, как это будет намного проще в обслуживании. Также имейте в виду, что новые версии выпускаются все время, версии браузера могут быть подделаны и т. Д. И т. Д. Его действительно нужно использовать только для конкретных изолированных исправлений, когда вы не можете найти другое решение.

0

Обнаружение браузера необходимо только для старых версий IE, если есть проблемы в других современных браузерах, то это, вероятно, ошибка разработчика.

Один из способов проверки на стороне сервера:

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

Другой способ заключается в использовании conditional comments в 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]--> 

Тогда регулярный стиль CSS будет выглядеть следующим образом:

.somestyle {} 

И задний стиль в ie.css будет выглядеть так:

.ie .somestyle {} 
0

Хороший вопрос, сначала вы можете добавить различные классы CSS, как:

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

Затем сделать элемент с классом, но пустой, как:

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

Затем в скрипте par t, вы можете добавить следующее для проверки браузера:

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

Я пробовал и работает, приветствует!

Смежные вопросы