Чат сообщества
   | |
| Модератор форума: Yuri_G |
| Сообщество uCoz » Мастерская uCoz » Дизайн: управление шаблонами » Оптимизация дизайна под разные браузеры |
| Оптимизация дизайна под разные браузеры |
|
Зачем нужен "правильный" 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, Удалил из html кода - результата нет. Всё делал идентично и на одном сайте и на другом, попробую сначала. Да, а где на странице начинается <body>?
И где начинается <head>? http://hot-kot.at.ua/
Сообщение отредактировал jardnepr - Вторник, 24 Сен 2013, 00:35:56
|
|
jardnepr,
Цитата а где на странице начинается <body>? |
|
Miss_Esq, Извините, что достаю, хочу сделать вот так как сказано здесь: http://uniq-ip.com/partnerka?notop=1 обычно не спрашиваю - дохожу сам, но здесь застрял (
перейдите по ссылке "рекламная кампания" http://hot-kot.at.ua/
Сообщение отредактировал jardnepr - Вторник, 24 Сен 2013, 00:44:18
|
|
|
|
|
|
BeRRy4655, что за бред в заголовке ????
Код <div id="message_box"> <img id="close_message" style="float:right;cursor:pointer;" src="/images/close.png"><h7>Внимание! Студия закрыта.</h7> </div> <div class="someclass"> <div class="loading"> <img style="margin: 10px 0 0 10px;" src="/images/loader.gif"> </div> </div> <script> jQuery(function($) { $(window).load(function () { $(".someclass").fadeOut(500); };); };); </script> Ошибка Цитата body { margin : 0; padding : 0; color : #fff; font-size : 12.5px; line-height : 1.6em; font-family : win8; background : url(/bg/body3.jpg) 50% 0 no-repeat; background-attachment : absolute; (fixed; scroll;) } Цитата в IE не работает этот вариант не пройдёт Код @font-face { font-family: "win8"; src: url("/font/segoeuisl.ttf");} Ознакомитесь с темой подгрузки нестандартных шрифтов .. Далее пропишите Doctype <!DOCTYPE html> в Общих настройках .. Сообщение отредактировал Miss_Esq - Воскресенье, 10 Ноя 2013, 13:28:57
|
|
Miss_Esq, я не просил критиковать, я хотел узнать, как сделать так, чтобы шрифт работал на IE =)
|
|
BeRRy4655, Это не критика а ваши ошибки требующие исправления ... а по поводу шрифтов, для поддержки шрифтов на разных обозревателях требуются разные форматы ..
http://www.fontsquirrel.com/fontface/generator Сообщение отредактировал Miss_Esq - Воскресенье, 10 Ноя 2013, 18:27:04
|
|
|
 Поделюсь своими наблюдениями по браузерам: У меня уст. Win7 и изначально обновил IE8 на 9. Вроде всё устраивало до момента, когда понадобилось в форуме цитату вставить... Почему-то имя цитируемого добавлялось, а текст - нет. Обновил до IE11 - такаяж ерунда. Но при этом ещё, в визуальном редакторе, перестали закрываться окошки управления материалами. Поставил Opera19 - здесь всё хорошо работает. Но эксплоер всёж оставил, только скинул обратно на IE9. На нём проверяю результаты выполненных работ. Если в нём работает - то в остальных браузерах точно будет... С уважением, SandroG
Сообщение отредактировал SG71 - Четверг, 27 Фев 2014, 10:57:23
|
|
Цитата SG71 (  )браузерах точно будет... Цитата SG71 ( )Почему-то имя цитируемого добавлялось, а текст - нет. Цитирование работает нормально ... Цитата изначально обновил IE8 на 9. Сообщение отредактировал Miss_Esq - Четверг, 27 Фев 2014, 18:46:44
|
|
Цитата Miss_Esq ( )Цитирование работает нормально ...  Я конечно понимаю, краткость сестра таланта... А нельзя ли по подробней, какая система у вас и браузер? Может я чего не настроил аль де галку не поставил... Век живи - век учись. Буду признателен если подскажите, де что настроить, чтоб работать в IE9. Не то, чтоб я фанат Эксплоера, но просто у большинства динозавров установлен только оный... Цитата Miss_Esq ( )каким образом ? Честно говоря, данный вопрос застал меня в расплох... Т.к. вы "продвинутый" пользователь - мне думается, что уж вы-то в курсе, как обновить IE... Но собстно отвечаю - через центр обновления Windows. А именно: пуск -> панель управления -> центр обновления Windows. Клик на "проверка обновлений". Далее в "важных" выбираю IE(9 или 10 или 11), ставлю галку, а остальное не скачиваю... Т.к. на сегодняшний день программисты Intel бросили все силы в Win 8, то все обновления, что-то исправляют, а что-то калечат... ... Напоминаю - у меня Win7+ Sp1. Если нуно могу перечислить установленные приложения... ... Заранее спасиБо за понимание!!!  С уважением, SandroG
Сообщение отредактировал SG71 - Четверг, 27 Фев 2014, 23:09:26
|
|
SG71,
Цитата какая система у вас и браузер? Несколько лет подряд Windows 7 максимальная и Internet Explorer 9 - 11 ... |
| |||