Чат сообщества
   | |
| Модератор форума: 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 |
|
hrantabe,
Quote я хочу указать срок на одну неделю |
|
hrantabe,
Quote чтобы браузеры получали картинки из кэша  Обьозреватели при первом заходе на сайт кэшируют страницу , её содержание , изображения , скрипты и т п и т д ... При следующих заходах файлы этой страницы ( изображения , скрипты и т п и т д ) берутся уже не сервера а из КЭШ обозревателя , кэшированные в первый раз ... С сервера берутся только HTML и адреса - ссылки на файлы ...Сообщение отредактировал Miss_Esq - Понедельник, 26 Сен 2011, 14:15:12
|
|
Кстати, а все-ли знают, что FF и Хром не хотят работать в CSS с идентификаторами и классами, имена которых начинаются с цифры?!
 Т.е., ни FF ни Хром не воспримут, к примеру, такие стили: Code TABLE.01A {...} TABLE#01A {...} Если не ошибаюсь, то ни в одном руководстве по HTML/CSS нет подобных ограничений на имена классов и/или идентификаторов? А разработчики FF и Хрома, судя по всему, решили проводить валидацию этих имен по правилам наименования переменных в языках программирования! Столкнулся с этим буквально сегодня и целый час искал причину - почему в IE и Опере все отображается нормально, а в FF и Хроме стили не "подхватываются"!  IE9, но работает и в младших версиях. Опера 11.51 FF 6.0.2 (но и младшие версии работают так же) Хром 14.0.x.x (но и младшие версии работают так же) Сообщение отредактировал sch779 - Вторник, 27 Сен 2011, 01:09:34
|
|
sch779,
Quote что FF и Хром не хотят работать в CSS  Quote почему в IE и Опере  не сталкивалисть , так как никогда и не писали классы и ид с цифр , всегда начало буквенное было ...Сообщение отредактировал Miss_Esq - Вторник, 27 Сен 2011, 02:21:00
|
|
Quote (Miss_Esq) Ну это хоть как то преодолимо Целый час угробил пока разобрался в чем баг! Quote (Miss_Esq) В IE 9 классы начинающиеся с цифры так же не принимаются обозревателем Если классы CSS, то и в IE и Опере как раз и работают классы (и идентификаторы), имена которых начинаются с цифры! |
|
sch779,
Quote имена которых начинаются с цифры! Quote .box1, .box2, .box3, .box4, .box5, .box6, .box7, .box8, .box9, .box10, .box11, .box12, .box13, .box14, .box15, .16box {width: 75%; height: 67em; border: 1px transparent solid; border-radius: 0px 0px 1em 1em; background-image: url('/FPD/FPPG.png');} Так у меня вся цепочка этой строки CSS отключилась , ВСЕ блоки пошли без стилей прописанных в строке ... Windows 7 + IE 9 , всё английское ... Сообщение отредактировал Miss_Esq - Вторник, 27 Сен 2011, 16:45:33
|
|
Quote (Miss_Esq) Windows 7 + IE 9 , всё английское ... На всякий случай (вдруг мне вчера это приснилось! ) только что проверил еще раз:Code 1. table#08A, table#08A td {font-size:12px; font-weight:bold; color:blue} 2. table.08A, table.08A td {font-size:12px; font-weight:bold; color:blue} 3. table#16box, table#16box td {font-size:12px; font-weight:bold; color:blue} 4. table.16box, table.16box td {font-size:12px; font-weight:bold; color:blue} 5. .16box td {font-size:12px; font-weight:bold; color:blue} <table id="08A" ...> <table class="08A" ...> <table id="16box" ...> <table class="16box" ...> Все варианты прекрасно отработали! Vista Ultim SP2 + IE9.0.8112.16421, все русское. XP Prof SP3 + IE8.0.6001.18702, все русское. Правда, у меня не установлен !DOCTYPE. Заголовок тестового HTML минимальный: Code <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> </head> Хотя и на сайте все номально отрабатывает - но и там заголовок без !DOCTYPE и прочих излишеств в заголовке. P.S. Подумал тут - некоторые редакторы (и uCoz-овский тоже) не заключают идентификатор и класс в кавычки, т.е. пишут типа Code <table class=08A ...> P.P.S Хотя - нет - проверил без кавычек - работает! Сообщение отредактировал sch779 - Вторник, 27 Сен 2011, 23:08:16
|
|
sch779,
Quote Правда, у меня не установлен !DOCTYPE. А без Doctype Internet Explorer 8 и Internet Explorer 9 не будут работать в своих режимах , только в режиме совместимости , а это сплошная морока . Можно конечно заставить их переключиться в режим конструкцией метатегов типа <?if($USER_AGENT$='ie' and $USER_AGENT_VER$='8.0')?> <meta http-equiv="X-UA-Compatible" content="IE=8"> <?else?> <?if($USER_AGENT$='ie' and $USER_AGENT_VER$='9.0')?> <meta http-equiv="X-UA-Compatible" content="IE=9"> <?endif?><?endif?> Но всё же лучше и то и другое ... Quote я то всегда в HTML все значения беру в кавычки Ставить кавычки - правило хорошего тона , разве что если HTML со стилями загоняешь в Javascript , то там естественно от них избавляться приходится . У меня так же всё в кавычках ..... C Doctype цифровые классы не катят .  Перепроверено .....Сообщение отредактировал Miss_Esq - Вторник, 27 Сен 2011, 23:24:49
|
|
Quote (Miss_Esq) только в режиме совместимости , а это сплошная морока А подробнее можно - в чем "морока"? Дело в том, что, как уже написал, не использую DOCTYPE и особых проблем нет ни с дизайном, ни с js-кодом - практически все элементы (и статические и динамические) одинаково (и как задумано!) ведут себя во всех основных браузерах (IE, FF, Опера, Хром - тестирую в каждом каждую новинку). И при этом не использую ни хаки ни подгонку под конкретный браузер. Единственное, кажеться, исключение - хак для отображения элементов "как сквозь туман". Как-то попробовал поставить DOCTYPE на сайт - сразу-же все "поплыло"! Даже стандартное шаблонное меню, в котором я "ни разу" ничего не "подкручивал"! Ну и бросил эту затею - благо все работает нормально и правильно, а значек типа "W3C валидный" мне не нужен!  |
|
sch779,
Quote хак для отображения элементов "как сквозь туман". Quote особых проблем нет ни с дизайном, ... Видела сайты такие без Doctype , проблема в том что когда захожу на сайт IE 9 всегда запускаю в режим стандартов IE 9 , При этом сайт " разваливается " , сразу сваливаю от туда ... Это конечно моё личное " поведене " , но всё же .... Quote а значек типа "W3C валидный" мне не нужен! |
|
millenium,
Quote как устранить 1 . Обновить версию 2 . Отключить TURBO 3 . Почистить КЭШ 4 . Заходить из другого обозревателя |
|
ajax>
<cmd p="innerHTML" t="blk549127"> <![CDATA[<div align="left" style="padding:10px;"><div class="myWinLoadSD"></div></div>]]> </cmd> <cmd p="js"> <![CDATA[var ad=window.location.href.replace(/#(.*)?/,''); setTimeout("window.location.href='"+ad+"?lSTvae'",'1000')]]> </cmd> </ajax> |
|
|
| |||