Модератор форума: Yuri_G  
Оптимизация дизайна под разные браузеры
Модератор форума
Сообщение # 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
Miss_Esq
Сообщений: 13859
Репутация: 4159
Уровень замечаний:

Сообщение # 676 | 23:44:06
Killer_Bee, Кароче ...... мне всё равно как он выглядит в сравнении отображений в Fire Fox и Google Ghrome ...

Всегда беру за эталон как выглядит сайт в IE 9 при написанном в общих настройках Doctype и потом уже сравниваю этот эталон с тем как он отображается в остальных обозревателях ....

Без Doctype в Общих настройках говорить не о чем ..

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

Сообщение # 677 | 00:00:57
Там написано Naruto,Anime,Manga,One Piece,Blech

Добавлено (08-Окт-2012, 00:00:57)
---------------------------------------------
http://img.planeta-naruto.ru/images/1dfd.png смотри

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

Сообщение # 678 | 00:20:36
Killer_Bee, У вас не HTML шапки, верха сайта а обрубок, не удивительно что отображается как попало ...


кот1999
Сообщений: 14
Репутация: 0

Сообщение # 679 | 20:03:04
Опера и IE


Google chrome и Яндекс Интернет



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

Сообщение # 680 | 20:13:35
кот1999, Адрес у сайта есть ??? Пропишите Doctype в общих настройках сайта и смотрите снова ...

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

deadjoker
Сообщений: 91
Репутация: 9

Сообщение # 681 | 16:07:21

Может кто-то подсказать необходимое значение doctype? Заодно может и другие косяки обнаружаться. Благодаря Валидатору кое-что исправил, но многие вещи до сих пор числятся в ошибках.
Selena
Сообщений: 15657
Репутация: 1100

Сообщение # 682 | 16:33:32
deadjoker, непонятно ни какой уровень строгости вас устраивает, ни какие ошибки у вас показывает валидатор. Так что, извините, но ответа на ваш некорректно поставленный вопрос не существует.

Отправляя сообщение о помощи, приводите ссылку на свой сайт. Это не считается рекламой, зато снимает массу вопросов.
deadjoker
Сообщений: 91
Репутация: 9

Сообщение # 683 | 16:41:28
Стандартный, судя по данной теме

Selena
Сообщений: 15657
Репутация: 1100

Сообщение # 684 | 16:44:38
deadjoker, получается вы сами знаете ответ на ваш вопрос.

Отправляя сообщение о помощи, приводите ссылку на свой сайт. Это не считается рекламой, зато снимает массу вопросов.
deadjoker
Сообщений: 91
Репутация: 9

Сообщение # 685 | 16:50:36
Наверное, если бы я его знал, то не стал бы спрашивать. С DocType не знаком, поэтому есть вероятность, что "очевидное" для вас непонятно или еще не знакома для меня. Поэтому собственно и стоял вопрос.
Сообщение отредактировал deadjoker - Пятница, 19 Окт 2012, 16:52:57
Deadshot
Сообщений: 412
Репутация: 524

Сообщение # 686 | 16:58:33
deadjoker, вот материал по <!DOCTYPE>

Пум-пурум-пурум-пум-пум!
Varvara1981
Сообщений: 1
Репутация: 0

Сообщение # 687 | 10:14:06
срочно нужна помощь, создала сайт по шаблону, вставила горизонтальное меню с анимацией, на мозиле всё нормально, а в опере, и в других браузерах меню статичное, нет подстраниц, и цвет не тот, вот ссылка http://solikmedia.ucoz.com
dom(61)
Сообщений: 16
Репутация: 0

Сообщение # 688 | 17:05:10
Подскажите, никак не могу найти причину. В IE на главной странице содержимое новостей съезжает влево и вниз. Где это можно поправить? http://www.grabovsky.ru/
Miss_Esq
Сообщений: 13859
Репутация: 4159
Уровень замечаний:

Сообщение # 689 | 17:35:43
dom(61), Прописать Doctype в общих настройках

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

Сообщение # 690 | 21:58:51
Quote (Miss_Esq)
Прописать Doctype в общих настройках



А у меня после прописывания Doctype съезжает в лево всё. Без него нормально.

Подскажите как аптемизировать сайт под IE9?
У меня много пользователей им пользуются, а модуль видео в IE9 нк работает.

С уважением, Александр.
Поиск:
Telegram
Будьте в курсе всех обновлений: подпишитесь на наш официальный Telegram-канал uCoz и задавайте вопросы в чате сообщества!