Модератор форума: Yuri_G  
Сообщество uCoz » Мастерская uCoz » Дизайн: управление шаблонами » Оптимизация дизайна под разные браузеры
Оптимизация дизайна под разные браузеры
Модератор форума
Сообщение # 1 | 22:12:11
Зачем нужен "правильный" HTML-код?

HTML - это специальный язык разметки для веб-страниц. Этот язык стандартизован. Значения каждого тега строго определены. Каждый тег имеет определенные атрибуты. HTML-код страницы интерпретируется браузерами и переводится в изображение веб-страницы, которое видит пользователь.

Теперь представьте, что HTML код страницы содержит ошибки (не соответствует стандарту). Что в этом случае делать браузеру?

Самый простой вариант - это вывести на экран сообщение об ошибке и все. Однако пользователь вряд ли будет рад увидеть вместо страницы, на которой пропущен закрывающийся тег, сообщение об ошибке. Поэтому создатели браузеров пошли другим путем. Браузеры пытаются (в меру своей интеллектуальности) "исправить" некорректный HTML-код.

Вот тут и кроется проблема. Каждый браузер имеет свои правила, по которым он будет исправлять HTML ошибки на веб-страницах. Поэтому, если на странице есть ошибки, то существует большая вероятность, что данная страница в разных браузерах будет выглядеть по-разному. Более того, если даже он сейчас выглядит одинаково во всех браузерах, это не значит, что так будет всегда. С выходом новой версии какого-либо браузера коррекция HTML ошибок может быть изменена. А вот следование стандартам изменено вряд ли будет.

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

В общем, бывает когда есть сайт, есть дизайн, но вот проблема - неизвестно, как он выглядит на других браузерах. Те, кто попроще, просто отписываются, что проверил на таком-то браузере, на других - не знаю.

Эта тема для того, чтобы обнаруживать косяки в разных браузерах. Также и проблема оптимизации и предложения по устранении ошибок (только советы, не просите других делать за вас работу)

Проблема с отображением тега HR

Советую вместо
Code
<hr>

который красиво может выглядить только в ИЕ использовать цветную однопиксельную картинку:
Code
<img src="путь до картинки/hr.gif" class="hr">

и прописать ее в стилях:
Code
.hr {height: 1px; width: 100%; margin-top: 5px; margin-bottom: 5px;}

© Andre

Разное понимание CSS браузреами типа IE и Opera (там же Mozilla и прочие)

Проблема в следующем: ИЕ и Опера по разному принимают стили и пересчитывают ее на свой лад. Так расстояние между тегами H1 и P разное и поэтому текст по разному смотрится. Для решения этой проблемы надо использовать дополнительную таблицу стилей под IE, поставить там в ручную padding и margin, или другие атрибуты (в зависиости от ситуации) и прописать ссылку в html, заключив ее в специальные теги.

Code
<html>
<head>
<title>Максим Пелевин - Главная страница</title>
<link href="http://maxpelevin.3dn.ru/_st/my.css" rel="StyleSheet" type="text/css">
                  <!--[if IE]><link rel="stylesheet" type="text/css" href="/img/ie7.css" /><![endif]-->
<script type="text/javascript" src="/img/global.js"></script>
</head>

Надеюсь понятно объяснил.

© Русак

Решаем проблему с прозрачностью картинок PNG в ИЕ: http://www.tigir.com/alpha_png.htm
Админ4945
Сообщений: 71
Репутация: -7

Сообщение # 841 | 12:30:07
Я веду школьный сайт, никаких спец. знаний нет, всё по простому "методом тыка"...... сейчас у меня возник вопрос...сайт всегда открываю в Гугл Хроме, сейчас открыла в браузере Яндекс и обнаружила, что на сайте всё намного меньше чем в Хроме....а я ведь подгоняю всё в Хроме для хорошего восприятия (по моему)....... подскажите, что делать? я так понимаю у меня Гугл Хром выставлен масштаб 125%, просто не обращала внимание....Как подгонять размер фото и др. чтобы во всех браузерах смотрелся комфортно? http://zimascsi6.ucoz.ru/
Сообщение отредактировал Админ4945 - Среда, 07 Авг 2013, 12:31:00
bandjuk
Сообщений: 6816
Репутация: 2398
Уровень замечаний:

Сообщение # 842 | 12:37:00
Админ4945, обычно все смотрят с масштабом 100%, конечно с масштабом 125% будет крупнее, не вижу связи между масштабом и типом браузера wacko
Alevtinavlad
Сообщений: 7
Репутация: 0

Сообщение # 843 | 15:30:41
Помогите пожалуйста, мой сайт http://fotoskazka.ucoz.ru/ в опере и мозиле отображается хорошо, а вот IE вся серединка съезжает вниз под меню что делать не знаю cry
bandjuk
Сообщений: 6816
Репутация: 2398
Уровень замечаний:

Сообщение # 844 | 15:36:10
Alevtinavlad, ПУ -- общие настройки -- Значение тега <!DOCTYPE>:
пропишите доктайп, например этот:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Прикрепления: 0239574.jpg (136.4 Kb)
Сообщение отредактировал bandjuk - Суббота, 17 Авг 2013, 15:36:56
Alevtinavlad
Сообщений: 7
Репутация: 0

Сообщение # 845 | 15:53:11
bandjuk огромное спасибо, прямо чудо как всё хорошо стало!!!!!!!!!!!!!!!!! biggrin
Miss_Esq
Сообщений: 13859
Репутация: 4159
Уровень замечаний:

Сообщение # 846 | 17:13:55
bandjuk,
Цитата
IE юзаем ???


hands v

Ты хотел меня любить Я уняла твою прыть
Я сказала: “Очень мал” мал помалу привыкал

Вместо ласки слышишь лай только деньги ей давай
Он и плакал и рыдал мал помалу привыкал

Год за годом время шло все стерпелось зажило
Ты все понял и постиг мал помалу ты привык

bandjuk
Сообщений: 6816
Репутация: 2398
Уровень замечаний:

Сообщение # 847 | 17:20:11
Цитата (Miss_Esq)
IE юзаем ???

я на идиота похож? Просто это дрянь сама в пуске поселилась )))
Miss_Esq
Сообщений: 13859
Репутация: 4159
Уровень замечаний:

Сообщение # 848 | 17:22:31
bandjuk, Не отмазывайтесь ... факт вещь тупая ...

Год за годом время шло, все стерпелось зажило
Ты все понял и постиг, мал помалу ты привык

biggrin

bandjuk
Сообщений: 6816
Репутация: 2398
Уровень замечаний:

Сообщение # 849 | 17:24:53
Цитата (Miss_Esq)
факт вещь тупая ...

какой факт? У пользователя были проблемы с Ослом, пришлось открывать эту дрянь и смотреть как отобразится в ней сайт с доктайпом.
Причём заметь остальным НОРМАЛЬНЫМ браузерам доктайп для нормального отображения сайта прописывать совсем и не обязательно! Осёл же нифига без него не вкуривает )))
Miss_Esq
Сообщений: 13859
Репутация: 4159
Уровень замечаний:

Сообщение # 850 | 17:43:42
bandjuk,
Цитата
прописывать совсем и не обязательно!
Не вкуриваете ... Doctype должен быть на страницах ... это стандарт ...

jardnepr
Сообщений: 43
Репутация: 19
Уровень замечаний:

Сообщение # 851 | 01:31:40
Здравствуйте, нужна помощь. Сайт отображается нормально только в мазиле. doctype прописывал все, какие находил - не помогает. Что может быть ещё? Спасибо.

Забыл! сайт: http://uslugi-online.at.ua/

http://hot-kot.at.ua/
Сообщение отредактировал jardnepr - Суббота, 21 Сен 2013, 01:32:23
bandjuk
Сообщений: 6816
Репутация: 2398
Уровень замечаний:

Сообщение # 852 | 01:38:17
jardnepr, конкретно что не так? В Опере 12.16 на мой взгляд с сайтом всё нормально
jardnepr
Сообщений: 43
Репутация: 19
Уровень замечаний:

Сообщение # 853 | 10:43:55
bandjuk, В хроме на главной странице разные расстояния между блоками новостей, а IE после загрузки страницы показывает только один из блоков новостей и всё, пустая страница.

http://hot-kot.at.ua/
Miss_Esq
Сообщений: 13859
Репутация: 4159
Уровень замечаний:

Сообщение # 854 | 15:41:37
jardnepr, Что за скрипт стоит в шапке ??? Убрать не пробовали ???

NZT
Сообщений: 369
Репутация: 483

Сообщение # 855 | 18:11:53
jardnepr, Наверное так:
iframe{height:auto!important;}
Сообщество uCoz » Мастерская uCoz » Дизайн: управление шаблонами » Оптимизация дизайна под разные браузеры
Поиск: