Модератор форума: 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
Stroim
Сообщений: 2
Репутация: 10

Сообщение # 826 | 23:14:12
Цитата (Miss_Esq)
но для профилактики пропишите Doctype в Общих настройках сайта
а где прописывать и что именно?)
Miss_Esq
Сообщений: 13859
Репутация: 4159
Уровень замечаний:

Сообщение # 827 | 23:18:12
Stroim, Панель управления сайтом - Админ бар - Настройки - Общие настройки

Внизу опция с полем ввода значения Doctype:

Значение тега <!DOCTYPE>:
Данный тег будет добавлен в самое начало документа. Используйте эту настройку только если понимаете ее смысл.

Поставьте туда или

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> - для HTML 4.01

или

<!DOCTYPE html> - для HTML 5

R0MANbl4
Сообщений: 2
Репутация: 0

Сообщение # 828 | 23:34:02
Цитата (R0MANbl4)
Подскажите новичку обновил винду установил браузеры и мозила и хром. появилась проблема перестал увеличивать картинки!!! http://www.foodsstore.ru/shop/1341/desc/moloko-sudarynja-2-5-1-litr Пробывал яву устанвливать и флэш и файрвол отключал ничего не помогает!!!!!!!

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

Сообщение # 829 | 00:04:57
R0MANbl4, Попобуйте отключить все НЕ системные скрипты, выбрать в настройках другую версию системной jQuery. Явно что то мешает работать системному лайтбоксу ..

orelmaxi
Сообщений: 30
Репутация: -10

Сообщение # 830 | 13:37:41
Привет, всем. У меня проблема у меня не правильно отображается сайт в опере в остальных хорошо отображается. Что мне делать?
Вставлял это код:

Код
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
все равно не правильно отображается.
что бы посмотреть мой сайт в подписи нажмите мой сайт.

Добавлено (14 Апр 2013, 13:37:41)
---------------------------------------------
Привет, всем. У меня проблема у меня не правильно отображается сайт в опере в остальных хорошо отображается. Что мне делать?
Вставлял это код:


Код
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
все равно не правильно отображается.
что бы посмотреть мой сайт в подписи нажмите мой сайт.

Miss_Esq
Сообщений: 13859
Репутация: 4159
Уровень замечаний:

Сообщение # 831 | 13:46:18
orelmaxi, Попробуйте применить .. <!DOCTYPE html>

Админ3919
Сообщений: 2
Репутация: 0

Сообщение # 832 | 16:46:06

Суть проблемы: Зафиксировал верхнюю часть <table width="670">, При разрешении 800*600, шапка не влазит и при горизонт прокручивании в правом верхнем углу не срабатывает contanier. В таб. CSS по умолч. стоит <contanier {background:url('/.s/t/868/3.gif') repeat-x #E2F7FF>(такая ситуация в браузерах firefox, chrome, opera, safari, а в ИЕ8 все норм), надеюсь на помощь, как это можно исправить?
НЕ НАШЕЛ на форуме подобной темы.
Miss_Esq
Сообщений: 13859
Репутация: 4159
Уровень замечаний:

Сообщение # 833 | 16:58:25
Админ3919, Адрес у сайта есть ??? А вообще сейчас под разрешение 800 х 600 ни кто не верстает .. минимальным считается 1024 х 768

Админ3919
Сообщений: 2
Репутация: 0

Сообщение # 834 | 17:28:04
http://krgdb4.ucoz.ru/

Добавлено (21 Апр 2013, 17:28:04)
---------------------------------------------
Miss_Esq, Верстал под 1024 х 768 проблему заметил когда уменьшил окно браузера по горизонт, потом стал смотреть с разрешением 800 х 600.

Miss_Esq
Сообщений: 13859
Репутация: 4159
Уровень замечаний:

Сообщение # 835 | 20:10:21
Админ3919, Проблема так сказать и останется, динамично адаптироваться страницы сатйа под размер окна обозревателя фисированного и резинового типа полноценно не может ....

Ирокез
Сообщений: 86
Репутация: 17

Сообщение # 836 | 21:16:03
Верстал сайт на Opera, в качестве body использовал свою картинку, для которой задал параметр top center. В итоге в Opera все выглядит идеально, в Chrome картинка размещается на 3 px левее, в IE картинки вовсе не видно...

Как это все привести к общему знаменателю? Буду признателен, если кто-нибудь подскажет.

Адрес сайта: http://kot.ucoz.com/
fflesh
Сообщений: 1784
Репутация: 1314

Сообщение # 837 | 22:24:52
Ирокез,
Код
background:url(http://kot.ucoz.com/img/1f.png) top center repeat-y #373832;

Пробел между скобкой и top забыл поставить.

Всё написанное выше - моё личное мнение и на абсолютную правоту не претендует.
Есть вопросы лично ко мне - пиши сюда: http://likbezz.ru/forum/8
Ирокез
Сообщений: 86
Репутация: 17

Сообщение # 838 | 22:52:09
fflesh, проблему с IE и Chrome это к сожалению не решило...
MUST-STYLE
Сообщений: 26
Репутация: 9

Сообщение # 839 | 21:24:31
Возможно кому пригодится список часто используемых Кросбраузерных CSS (углы, тени, прозрачность, градиент, переходы, трансформация и пр.)
http://must-style.ru/publ/useful/krossbrauzernye_css/4-1-0-86
Ge1i0N
Сообщений: 24
Репутация: 1

Сообщение # 840 | 10:03:10
Цитата (MUST-STYLE)
Возможно кому пригодится список часто используемых Кросбраузерных CSS

Реклама своего сайт? Это безусловно хорошо, но есть удобный сервис http://css3generator.com/
Сообщество uCoz » Мастерская uCoz » Дизайн: управление шаблонами » Оптимизация дизайна под разные браузеры
Поиск: