Определите, какой браузер используется, затем создайте класс, зависящий от этого.

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

Есть ли способ сделать это в CSS?

EDIT:

Right хорошо я получил его на работу в IE и Firefox теперь, но он выглядит немного не в хроме .... есть некоторые Javascript, чтобы обнаружить, если я использую хром, а затем на основе после этого измените нижнюю границу класса #titleAreaBox?

источник

2013-06-11 Callum Holden

Вы не можете это сделать CSS, я могу дать вам ответ на jQuery? или JS? –

Да, было бы полезно, если вы можете это сделать в JS –

Есть более эффективные способы обработки большинства несовместимостей. Можете ли вы быть более ясными в своем вопросе о том, какое поведение вы пытаетесь изменить, совершить ошибку или эффект, который вы испытываете? –

Вы можете сделать это для Internet Explorer с условными комментариями, например:

<!--[if IE 6]> 
    // IE6 
<![endif]--> 
<!--[if lte IE 8]> 
    // IE8 or below 
<![endif]-->

Для других браузеров, вы должны использовать JavaScript. (Подсказка: попробуйте использовать navigator.userAgent, который на моем компьютере "Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/27.0.1453.110 Safari/537.36".) Для получения дополнительной информации, see this link.

источник

2013-06-11 18:07:08 Doorknob

IE 10 удалил эту функцию – SLaks

Вам нужен navigator объект для этого

источник

2013-06-11 18:07:35

Вы можете иметь прогрессивно расширенную CSS с помощью Modernizr:

Modernizr библиотека JavaScript, которая определяет HTML5 и CSS3 особенности в браузере пользователя .

источник

2013-06-11 18:08:20

Как насчет использования Conditional CSS?

Он работает на стороне сервера и позволяет поместить условия в вашем коде CSS вот пример с веб-сайта проекта:

body { 
    font: 90%/1.45em "Lucida Grande", Verdana, Arial, Helvetica, sans-serif; 
    margin: 0; 
    padding: 0; 
    color: #333; 
    background-color: #fff; 
} 

body, html { 
    height: 100%; 
    width: 100%; 
} 

.container { 
    text-align: center; 
    font-size: 3em; 
} 

[if IE].container { 
    height: 100%; 
    width: 100%; 
    text-align: center; 
    line-height: 2em; 

    [if gte IE 7]background: url('ie7.png') no-repeat center center; 
    [if lte IE 6]background: url('ie.jpg') no-repeat center center; 
} 

[if Webkit].container { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    height: 70px; 
    width: 400px; 
    margin-top: -125px; 
    margin-left: -200px; 
    padding-top: 180px; 

    -webkit-border-radius: 30px; 
    -webkit-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5); 

    background: url('webkit.png') no-repeat center 30px; 
    background-color: #eee; 

    -webkit-text-stroke: 1px #555; 
    text-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5); 
} 

[if Opera].container { 
    position: absolute; 
    top: 50%; 
    height: 60px; 
    width: 100%; 
    margin-top: -100px; 
    padding-top: 140px; 

    background: url('opera.png') no-repeat center 10px; 
    background-color: #ccc; 
} 

[if Gecko].container { 
    position: absolute; 
    top: 0; 
    left: 50%; 
    height: 100%; 
    width: 300px; 
    margin-left: -150px; 

    font-size: 32px; 
    line-height: 2em; 

    background: url('moz.png') no-repeat center center; 
    background-color: #ddddff; 
}

источник

2013-06-11 18:08:31

Для Internet Explorer вы можете добавить это внутри головки HTML тег:

<!--[if IE 6]> 
...include IE6-specific stylesheet here... 
<![endif]--> 
<!--[if IE 7]> 
...include IE7-specific stylesheet here... 
<![endif]--> 
<!--[if lte IE 8]> 
    // IE8 or below 
<![endif]-->

для Mozilla вы можете добавить это в таблицу стилей, чтобы указать код CSS только для браузера Mozilla

<style type="text/css"> 
@-moz-document url-prefix() { 
    h1 { 
     color: red; 
    } 
} 

/***** Selecor Hacks ******/ 

/* IE6 and below */ 
* html #uno { color: red } 

/* IE7 */ 
*:first-child+html #dos { color: red } 

/* IE7, FF, Saf, Opera */ 
html>body #tres { color: red } 

/* IE8, FF, Saf, Opera (Everything but IE 6,7) */ 
html>/**/body #cuatro { color: red } 

/* Opera 9.27 and below, safari 2 */ 
html:first-child #cinco { color: red } 

/* Safari 2-3 */ 
html[xmlns*=""] body:last-child #seis { color: red } 

/* safari 3+, chrome 1+, opera9+, ff 3.5+ */ 
body:nth-of-type(1) #siete { color: red } 

/* safari 3+, chrome 1+, opera9+, ff 3.5+ */ 
body:first-of-type #ocho { color: red } 

/* saf3+, chrome1+ */ 
@media screen and (-webkit-min-device-pixel-ratio:0) { 
#diez { color: red } 
} 

/* iPhone/mobile webkit */ 
@media screen and (max-device-width: 480px) { 
#veintiseis { color: red } 
} 

/* Safari 2 - 3.1 */ 
html[xmlns*=""]:root #trece { color: red } 

/* Safari 2 - 3.1, Opera 9.25 */ 
*|html[xmlns*=""] #catorce { color: red } 

/* Everything but IE6-8 */ 
:root *> #quince { color: red } 

/* IE7 */ 
*+html #dieciocho { color: red } 

/* Firefox only. 1+ */ 
#veinticuatro, x:-moz-any-link { color: red } 

/* Firefox 3.0+ */ 
#veinticinco, x:-moz-any-link, x:default { color: red } 



/***** Attribute Hacks ******/ 

/* IE6 */ 
#once { _color: blue } 

/* IE6, IE7 */ 
#doce { *color: blue; /* or #color: blue */ } 

/* Everything but IE6 */ 
#diecisiete { color/**/: blue } 

/* IE6, IE7, IE8 */ 
#diecinueve { color: blue\9; } 

/* IE7, IE8 */ 
#veinte { color/*\**/: blue\9; } 

/* IE6, IE7 -- acts as an !important */ 
#veintesiete { color: blue !ie; } /* string after ! can be anything */ 
</style>

источник

2013-06-11 18:09:55

IE 10 удалил эту функцию. – SLaks

Я предполагаю, что для IE10 ему это не понадобится, только для более старых версий, потому что IE10 отстой меньше, я думаю :) –

Ah ok, который работал для mozilla thanks .... это любой другой код, подобный этому для chrome, safari и т. Д. ? –

Вы можете сделать это с помощью PHP с помощью $ _SESSION [ 'HTTP_USER_AGENT']

Также можно настроить таргетинг IE браузер через HTML: Try:

<!--[if IE 6]><link rel="stylesheet" href="path_to_style_ie6.css" type="text/css" media="screen, projection"><![endif]--> 
<!--[if IE 7]><link rel="stylesheet" href="path_to_style_ie7.css" type="text/css" media="screen, projection"><![endif]-->

Или в файле CSS см перелива вопрос : Apply CSS rules if browser is IE

источник

2013-06-11 18:11:28 LAL

Делайте это в JQuery, как это:

$(document).ready(function(){ 

    if(navigator.userAgent.indexOf("Mozilla") > 0) 
     $(".titleAreaBox").css("margin-top", changed_value); 

    if (navigator.userAgent.indexOf("MSIE") > 0) 
     $(".titleAreaBox").css("margin-top", changed_value); 

    if (navigator.userAgent.indexOf("Chrome") > 0) 
     $(".titleAreaBox").css("margin-top", changed_value); 

    if(navigator.userAgent.indexOf("Opera") > 0) 
     $(".titleAreaBox").css("margin-top", changed_value); 

});

источник

2013-06-11 18:12:34

. Ах, хорошо, есть ли способ вместо того, чтобы идти в другой файл css. Ссылка на класс на странице, а затем изменить его в зависимости от браузера? –

Да, есть! просто проверьте это через минуту или две! –

@CallumHolden проверить это сейчас! –

Как уже упоминалось, Modernizr идеально подходит для этого. Проверка версии браузера больше не рекомендуется. Вместо этого вы должны проверить функциональность, которая необходима. Вы можете использовать библиотеку, такую как Modernizer, чтобы помочь вам в этом.

EG: Для проверки функциональности геолокации вы можете использовать эту проверку:

if (Modernizr.geolocation) { 
    //your code 
}

Если вы проверяете версию браузера, наверняка вы хотите получить определенную часть функциональности из него, как геолокация или AJAX (IE использует разные библиотеки для достижения этой цели на протяжении своей жизни по какой-то причине).

источник

2013-06-11 18:22:50 Justin

Определите, какой браузер используется, затем создайте класс, зависящий от этого.

ответ

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