как загрузить css из javascript
Всем привет!
Столкнулся с такой проблемой, что в отображение стилей в разных браузерах происходит по разному. Ну например в Опере и в Фоксе все ровно, а вот в 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>
Подскажите плииз решение проблемы. Если мой подход в корне не правильный, то пожалуйста подскажите как такой вопрос решается другим путем. |
Используйте вместо этого условные комментарии IE!
|
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;
}
|
Спасибо Вам!
Вот код, который мне помог:
<![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? |
GRean,
Цитата:
|
теперь проблема в том, что в лисе выполняются два условия, а в IE все как надо работает.
Объясните плииз как пользоваться этими хаками, что привел JsLoveR. Их надо просто скопировать в стили или по месту назначения в див пихать? |
<!--заверни условие для Ie в комментарии-->, так
<!--[if IE 6]><link href="styles.css" rel="stylesheet" type="text/css" /><![endif]-->и тогда в других браузерах, кроме Ие это условие не будет срабатывать |
Ах, да, забыл сказать, что хаки для других браузеров добавлять в CSS, например:
@-moz-document url-prefix() {
div.elem {color:red;}
}
|
IE тоже видит эти комментарии. Для примера сделал вот так :
<!-- <a>IE</a> --> |
<!-- --> Комментарии для html кода, в них добавляются условия для загрузки стилей IE, другие браузеры воспринимают это как комментарии, это условие добавляется обычно в <head></head> и если нету никакого условия внутри этих комментариев ничего происходить не будет.
|
В итоге добился своего результата.
Вот пример: <link href="FFStyle.css" type="text/css" rel="stylesheet"/> <!--[if IE]><link href="IEStyle.css" type="text/css" rel="stylesheet"/><a>IE</a><![endif]--> Оказывается я напутал порядок команд внутри тега, то есть после линка обязательно должен href идти, иначе ошибка. Какой строгий CSS, а вот совместимость хромает, одна головная боль с этим CSS. |
Цитата:
<link rel="stylesheet" type="text/css" href="http://javascript.ru/forum/clientscript/vbulletin_css/style-540801a6-00003.css" id="vbulletin_css" />и все работает. |
GRean,
Вы бы, допустим, верстали html под какой-то один браузер, например, Мозиллу, а под другие браузеры делали отдельные стили, а вообще лучше уметь верстать одним кодом. |
Цитата:
Цитата:
Во флэше почти все что угодно могу сделать, а вот в html,css и javascript я делаю первые шаги. Я и так чуть не утанул в литературе. Но практика лучше всего. |
Цитата:
p.s. вторая цитата в вашем сообщении не моя) |
Цитата:
Если можно, хотелось бы отдельно поинтересоваться. Возник параллельный вопрос. Теперь у оперы и лисы, разная высота позиционирования текста. То есть если у оперы надо ниже отпустить текс, а в лисе наоборот поднять его. Сам текст находится в
<Table><div id = "menu">ТЕКС</div></Table>
#menu {
PADDING:0px;
MARGIN:0px;
position: relative;
float: left;
left:0px;
top:0px;
width: 120px;
height: 50px;
border: solid 1px black;
}
Есть ли какие либо средства, кроме хаков отрегулировать высоту ? |
Цитата:
Цитата:
|
Вот сам сайт:
http://www.flashgame.b13.su/exp/Indexx.html Если запустить под лисой, то номер телефона почти правильно стоит, просто в стиле я его не отрегулировал. А если под оперой запустить, то идет смещение. Стиль используется один и тот же для Оперы и для лисы. Собственно через страницу можно и сам код увидеть. |
Заголовки внутри <a>… :-/ учите XHTML, который взялись использовать.
И для <h1..6> браузеры задают оформление, каждый своё, поэтому нужно сбросить хотя бы margin и padding по умолчанию. Ну и высоту строки нужно с помощью line-height регулировать. |
Спасибо за советы и помощь. Пошел разбираться!
|
| Часовой пояс GMT +3, время: 08:15. |