Визуализация Div на основе браузера Тип

У меня есть DIV тег, который выглядит следующим образом:Визуализация Div на основе браузера Тип

<div id="loadingDiv" class="loadingDiv"; style="position:absolute; left:400px; top:292px;"> 
    <strong>Retrieving Data - One Moment Please...</strong> 
</div>

Это кажется, что Chrome и IE не делают это таким же образом. В IE текст намного дальше влево, чем в Chrome. Я не знаю, почему это так. Итак, есть ли способ создать стиль, зависящий от типа браузера? Например, если браузером является IE, я бы хотел, чтобы значение слева составляло 300 пикселей и 400 пикселей, если Chrome. Или, есть ли лучший способ справиться с этим?

источник

2013-03-08 Hosea146

точка с запятой после атрибута класса является недействительным HTML синтаксис –

пытались ли вы с помощью [CSS сброса стилей] (HTTP: //stackoverflow.com/questions/tagg ed/css + reset), чтобы устранить различия между браузерами? –

@RubenInfante - Спасибо. Я исправил это, но это не решило проблему позиционирования. – Hosea146

Даже если я не рекомендую использовать CSS для браузера, всегда лучше оптимизировать свой CSS, чтобы выглядеть как минимум во всех браузерах, вы можете делать то, что хотите, используя какой-то javascript в сочетании с CSS.

Вот код:

<html> 
<head> 

<title>browser specific css</title> 

<style> 

    .loadingDiv { 

     position: absolute; 
     display: none; 
     font-weight: bold; 

    } 

    .loadingDiv.ie { 

     display: block; 
     left: 300px; 
     top: 292px; 
     background: #00CCFF; 
     color: #454545; 

    } 

    .loadingDiv.chrome { 

     display: block; 
     left: 400px; 
     top: 292px; 
     background: #FCD209; 
     color: #E53731; 

    } 

    .loadingDiv.firefox { 

     display: block; 
     left: 400px; 
     top: 292px; 
     background: #D04F16; 
     color: #FFFFFF; 

    } 

    .loadingDiv.default { 

     display: block; 
     left: 400px; 
     top: 292px; 

    } 

</style> 

<script> 

    window.onload = function() { 

     var check_for_ie = detect_browser("MSIE"); 
     var check_for_chrome = detect_browser("Chrome"); 
     var check_for_firefox = detect_browser("Firefox"); 

     var browser_name = ""; 

     var loading_div = document.getElementById("loadingDiv"); 
     var loading_div_html = loading_div.innerHTML; 

     if (check_for_ie == true) { 
      browser_name = "Internet Explorer"; 
      loading_div.className = "loadingDiv ie"; 
     } 
     else if (check_for_chrome == true) { 
      browser_name = "Google Chrome"; 
      loading_div.setAttribute("class","loadingDiv chrome"); 
     } 
     else if (check_for_firefox == true) { 
      browser_name = "Firefox"; 
      loading_div.setAttribute("class","loadingDiv firefox"); 
     } 
     else { 
      browser_name = "Unchecked browser"; 
      loading_div.setAttribute("class","loadingDiv default"); 
     } 

     loading_div.innerHTML = loading_div_html + "(you are browsing with "+browser_name+")"; 

    } 

    function detect_browser(look_for) { 

     var user_agent_string = navigator.userAgent; 
     var search_for_string = user_agent_string.search(look_for); 

     if (search_for_string > -1) { 
      return true; 
     } 
     else { 
      return false; 
     } 

    } 

</script> 

</head> 
<body> 

    <div id="loadingDiv" class="loadingDiv" > 
     Retrieving Data - One Moment Please... 
    </div> 

</body> 
</html>

А вот рабочий пример:
http://simplestudio.rs/yard/browser_specific_css/browser_specific_css.html

EDIT:

Если вам необходимо проверить некоторые другие браузеры смотрят на строку пользовательского агента этого конкретного просмотра г и найти что-то, что является уникальным в нем и делает разницу между этим браузером и другими и использовать это так:

var check_for_opera = detect_browser("Opera");

Детектирование браузеры от агента пользователя может быть сложно, так быть осторожным, даже обновить свою функцию, если нужно ...

Обратите внимание, что это просто быстрый пример ...

источник

2013-03-08 23:29:05 Develoger

Спасибо. Мне любопытно, какие разные браузеры поддерживаются с помощью этого синтаксиса? – Hosea146

Я отредактировал свой ответ, чтобы вы могли посмотреть, как проверить другие браузеры ... – Develoger

Я отредактировал свой ответ, чтобы использовать .className, если клиентский браузер IE, потому что .setAttribute не работает хорошо по крайней мере в моем IE :(damn Microsoft ... – Develoger

Визуализация Div на основе браузера Тип

ответ

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