Форум

GRean · #1 (**permalink**) 17.04.2010, 13:56

Всем привет!
Столкнулся с такой проблемой, что в отображение стилей в разных браузерах происходит по разному. Ну например в Опере и в Фоксе все ровно, а вот в IE кривовато выводятся стили. Решил для каждого браузера подгружать свою таблицу стилей.
С определением типа браузера разобрался, но вот не получается загрузить нужный мне стиль.

<script>

var ua = navigator.userAgent.toLowerCase();
// Определим Internet Explorer
isIE = (ua.indexOf("msie") != -1 && ua.indexOf("opera") == -1); 
// Opera
isOpera = (ua.indexOf("opera") != -1); 
// Gecko = Mozilla + Firefox + Netscape
isGecko = (ua.indexOf("gecko") != -1);
// Safari, используется в MAC OS
isSafari = (ua.indexOf("safari") != -1);
// Konqueror, используется в UNIX-системах
isKonqueror = (ua.indexOf("konqueror") != -1);
// Простая проверка с помощью document.write
document.write(
    "isIE = " + isIE + "<br>" +
    "isOpera = " + isOpera + "<br>" +
    "isGecko = " + isGecko + "<br>" +
    "isSafari = " + isSafari + "<br>" +
    "isKonqueror = " + isKonqueror + "<br>"
);

if(isIE){
// Что нужно вписать сюда, что бы загрузить Таблица_стилей_для_ИЕ.css
}
else if(isGecko){
// Что нужно вписать сюда, что бы загрузить Таблица_стилей_для_FF.css
}
else if(isOpera)
// Что нужно вписать сюда, что бы загрузить Таблица_стилей_для_Opera.css
</script>

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

subzey · #2 (**permalink**) 17.04.2010, 17:14

Используйте вместо этого условные комментарии IE!

JsLoveR · #3 (**permalink**) 17.04.2010, 17:50

GRean,
Если у пользователя будет отключён джаваскрпит, то стили не подгрузятся, для этих целей есть:
Для Ie:

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

Для Opera:

@media all and (min-width: 0) {
.style { background: #FF0; }
}
html:first-child .style {
background: #FF0;
}

Для Лисы, Сафари:

html:root .style {
background: #FA0;
}

.style, x:-moz-any-link {
background: #FA0;
}

GRean · #4 (**permalink**) 17.04.2010, 18:10

Спасибо Вам!

Вот код, который мне помог:

<![if IE ]>
    <link rel="stylesheet" type="text/css" href="IEStyle.css" />
<![endif]>
<![if !IE ]>
    <link rel="stylesheet" type="text/css" href="FFStyle.css" />
<![endif]>

Думаю этого будет достаточно! Или этот код тоже требует javascript?

JsLoveR · #5 (**permalink**) 17.04.2010, 18:16

GRean,

Сообщение от GRean

Или этот код тоже требует javascript?

Нет)

GRean · #6 (**permalink**) 17.04.2010, 19:06

теперь проблема в том, что в лисе выполняются два условия, а в IE все как надо работает.

Объясните плииз как пользоваться этими хаками, что привел JsLoveR.
Их надо просто скопировать в стили или по месту назначения в див пихать?

JsLoveR · #7 (**permalink**) 17.04.2010, 19:19

, так

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

и тогда в других браузерах, кроме Ие это условие не будет срабатывать

JsLoveR · #8 (**permalink**) 17.04.2010, 19:38

Ах, да, забыл сказать, что хаки для других браузеров добавлять в CSS, например:

@-moz-document url-prefix() {
div.elem {color:red;}
}

GRean · #9 (**permalink**) 17.04.2010, 19:42

IE тоже видит эти комментарии. Для примера сделал вот так :

JsLoveR · #10 (**permalink**) 17.04.2010, 19:52

Комментарии для html кода, в них добавляются условия для загрузки стилей IE, другие браузеры воспринимают это как комментарии, это условие добавляется обычно в <head></head> и если нету никакого условия внутри этих комментариев ничего происходить не будет.

Форум

Справочник

Discord чат

Курсы javascript