Справочник функций

Ваш аккаунт

Войти через: 
Забыли пароль?
Регистрация
Информацию о новых материалах можно получать и без регистрации:

Почтовая рассылка

Подписчиков: -1
Последний выпуск: 19.06.2015

Проблемы с версткой под разные браузеры

3.4K
27 мая 2006 года
_Undead_
43 / / 05.10.2004
Написал сайт, тестив его только под IE6.
Но когда стал запускать его в Mozilla 1.7, Mozilla Firefox 1.5, Opera 8.50, то обнаружил ужасное отображение. Ссылки в них плохо выглядят, если содержат рисунок и текст вместе. На мозилле вообще не отрисовывается целая часть сайта. На опере и файрфоксе сайт намного более растянут по вертикали. Ни 1 из них не поддерживает растровый фон ссылки.
Сайт активно использует таблицу для верстки и CSS.

Найти материал по данной теме не удалось... поисковики...

Каким образом написать кроссбраузерный дизайн сайта?
5.3K
27 мая 2006 года
r000n_m
177 / / 26.02.2006
Писать несколько дизайнов под каждый броузер, при заходе на главную страницу с помощью JavaScript определять тип браузера и в зависимости от этого переходить на страницу с тем или иным оформлением. Задача свелась к идентификации броузера
15
27 мая 2006 года
shaelf
2.7K / / 04.05.2005
Цитата:
Originally posted by _Undead_
Написал сайт, тестив его только под IE6.
Но когда стал запускать его в Mozilla 1.7, Mozilla Firefox 1.5, Opera 8.50, то обнаружил ужасное отображение. Ссылки в них плохо выглядят, если содержат рисунок и текст вместе. На мозилле вообще не отрисовывается целая часть сайта. На опере и файрфоксе сайт намного более растянут по вертикали. Ни 1 из них не поддерживает растровый фон ссылки.
Сайт активно использует таблицу для верстки и CSS.

Найти материал по данной теме не удалось... поисковики...

Каким образом написать кроссбраузерный дизайн сайта?


Если хочешь совета, то при вёрстки поступай следующим образом:
1. Разметь HTML.
2. Напиши валидный CSS по правилам
3. Начинай проверять в браузерах по нисходящей совместимости, т.е. FireFox, Opera, IE.
Вот собсно и всё. Ещё крайне желательно изучать недостатки каждого браузера.
Удачи.

Цитата:
Писать несколько дизайнов под каждый броузер, при заходе на главную страницу с помощью JavaScript определять тип браузера и в зависимости от этого переходить на страницу с тем или иным оформлением. Задача свелась к идентификации броузера


Ну ты сейчас научишь...То, что ты говоришь, уже давно не употребляется. Эту фишку юзают только те, кому лень CSS учить.

3.4K
28 мая 2006 года
_Undead_
43 / / 05.10.2004
Вот у меня на сайте реализованы, часы идущие.
В коде вызывается так:
<script type="text/javascript">showTime()</script>
На FireFox, Opera, IE, часы идут как надо, но в просто Mazilla вся часть сайта просто исчезает.

Каким образом обойти это? чтоб и на обычной мазиле все рисовалось. ( убираю этот кусок кода и появляется часть сайта, но часы тогда не работают ).
8
28 мая 2006 года
mfender
3.5K / / 15.06.2005
Цитата:
Originally posted by r000n_m
Писать несколько дизайнов под каждый броузер, при заходе на главную страницу с помощью JavaScript определять тип браузера и в зависимости от этого переходить на страницу с тем или иным оформлением. Задача свелась к идентификации броузера


Под каждый не напишешь. Писать нужно один под двигло mshtml и gecko с учётом особенностей Opera, FF и IE. При чём учитывать эти особенности нужно уже начинать с дизайна, т.е., когда проектируешь это всё в фотошопе, грубо говоря.

Единственное отклонение, которое я вижу в этом деле - можно использовать разные css-файлы для разных браузеров, да и то - забивать в них только те объекты, которые характерны для того или иного браузера. (* предвижу возмущение Shaelf'а, который сейчас заявит, что всё можно сделать одним списком :D *)

8
28 мая 2006 года
mfender
3.5K / / 15.06.2005
Цитата:
Originally posted by _Undead_
Вот у меня на сайте реализованы, часы идущие.
В коде вызывается так:
<script type="text/javascript">showTime()</script>
На FireFox, Opera, IE, часы идут как надо, но в просто Mazilla вся часть сайта просто исчезает.

Каким образом обойти это? чтоб и на обычной мазиле все рисовалось. ( убираю этот кусок кода и появляется часть сайта, но часы тогда не работают ).


Ты, блин, молодец: красиво продемонстрировал, как ты вызываешь часы. А дальше?

Включив телепатию, я предполагаю, что у тебя где-то не закрыт тэг. FF, Opera и IE в некоторых лёгких случаях (типа <div> без стиля не закрытый) обходят это препятствие (с Оперой - тяжелее), но могут выкинуть вполне понятный фортель с визуализацией написанного. А вот "просто Mazilla" - может и не понять и просто заткнётся на этом месте.

Совет: вдумчиво вчитайся в код document'а. Посмотри её в dom-инспекторе. Он тебе больше поможет, чем телепатия этого кворума.

3.4K
28 мая 2006 года
_Undead_
43 / / 05.10.2004
все нашел, что надо.
15
29 мая 2006 года
shaelf
2.7K / / 04.05.2005
Цитата:
Originally posted by mfender
Единственное отклонение, которое я вижу в этом деле - можно использовать разные css-файлы для разных браузеров, да и то - забивать в них только те объекты, которые характерны для того или иного браузера. (* предвижу возмущение Shaelf'а, который сейчас заявит, что всё можно сделать одним списком :D *)


А что, разве в одном нельзя? К тому же во многих местах верстальщик и дизайнер - это разные люди и дизайнеру положить сверху на верстальщика, поэтому он рисует как ему нравиться и лишь бы заказчик одобрил. История не высосана из пальца. Далее. Раскидывать по разным файлам из-за браузеров не имеет смысла, т.к. хаков как правило немного (2-5) и их мона запихнуть в один файл. По поводу подключения CSS с помощью JavaScript, дык я это делал только один раз (да и то из-за размера экрана). Повторюсь, сайт с подключеным CSS файлом с помощью JavaScript теряет свою доступность, а это уже не здорово.

352
29 мая 2006 года
skywalker
694 / / 10.02.2006
Цитата:
Originally posted by shaelf
Если хочешь совета, то при вёрстки поступай следующим образом:
1. Разметь HTML.
2. Напиши валидный CSS по правилам
3. Начинай проверять в браузерах по нисходящей совместимости, т.е. FireFox, Opera, IE.
Вот собсно и всё. Ещё крайне желательно изучать недостатки каждого браузера.
Удачи.


Этот вариант - единственно верный!!!
Добавлю, что если один и тот же вариант css правила осликом понимается в одну стороны, а оперой и лисенком в другую (например padding), то можно использовать такой хак:

родительскийКласс дочернийКласс{правила}/*для ослика*/
родительскийКласс>дочернийКласс{правила}/*для других браузеров*/

Тогда и будет один файл css для всех браузеров, а не куча разных, и определение JavaScript'ом браузера не нужно

15
29 мая 2006 года
shaelf
2.7K / / 04.05.2005
Ещё довольно неплохо проходит
 
Код:
<!--[if IE]>
<![endif]-->
Реклама на сайте | Обмен ссылками | Ссылки | Экспорт (RSS) | Контакты
Добавить статью | Добавить исходник | Добавить хостинг-провайдера | Добавить сайт в каталог