Чат сообщества
   | |
| Модератор форума: 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 |
|
... Ёлки-палки... какую интересную тему нашёл.
Обязательно отпишусь .. тем более поднаторел в этом... достаточно...  Ладно, навскидку вот: хак для оперы. Если что-то не катит под Оперой - пишем стили под неё в отдельный файл, например style-opera.css и подключаем его вот этим кодом: Code <link rel="stylesheet" type="opera/css" href="/style-opera.css" media="screen" /> - Эти стили видит только опера. Вот. Flesh Всё написанное выше - моё личное мнение и на абсолютную правоту не претендует.
Есть вопросы лично ко мне - пиши сюда: http://likbezz.ru/forum/8 Сообщение отредактировал fflesh - Понедельник, 11 Янв 2010, 22:52:08
|
|
rusak,
Quote (rusak) Советую вместо , который красиво может выглядить только в ИЕ использовать цветную однопиксельную картинку:  и прописать ее в стилях: .hr {height: 1px; width: 100%; margin-top: 5px; margin-bottom: 5px;} Пользуюсь пустым дивом, вот так: Code <div class="hrb650"></div> и CSS: Code .hrb650{background:url("i/hr-bottom-650x13.gif") no-repeat 50% 100%;height:13px;clear:both;margin:0 auto;} ... Мне так нравится больше... Не дай боже переименуешь картинку или папку, в которой она лежит... А в моём случае - отредактируешь пару классов... Тем более у меня таких hr несколько... А вот с этим: Quote (rusak) Советую вместо , который красиво может выглядить только в ИЕ использовать цветную однопиксельную картинку: Главное правильно прописать его, hr то есть. Вот так, например: Code hr{border:0 none;color:silver;background:silver;height:1px;clear:both;float:none;} - и все путём, во всех браузерах. Главное мозг включить... А что бы отступы были одинаковые прописываем вот это: Code * html hr{margin:-5px 0 3px! important;} /* For IE7 */ *+html hr{margin:-5px 0 3px! important;} P.S. А где твой аватар? - обиделся и сбежал?... Flesh Всё написанное выше - моё личное мнение и на абсолютную правоту не претендует.
Есть вопросы лично ко мне - пиши сюда: http://likbezz.ru/forum/8 Сообщение отредактировал fflesh - Среда, 13 Янв 2010, 02:46:14
|
|
http://saushkin.ucoz.ru.photo
Рамка вокруг фотографий с отступами 5 пикселей, бордером thin dashed в FF, Opera, Safari - отображается как надо В IE бордера не видно вовсе, а рамка внизу с отступом куда больше чем 5 пикс. И еще IE не реагирует на события кнопок меню, в FF, Opera, Safari при наведении появляется нижний бордер. |
|
AcetoN, вместо thin поставьте числовое значение. Для IE нужно явно указывать оформление ссылок, в других браузерах срабатывает автоопределение.
Для верхнего меню не описаны указанный классы (типа "eTag eTagGr8"). Для всех благодарностей: + в репутацию.
Вопрос вопросов: форма даты |
|
Хм, я вот покапался и убонаружил следующее:
Все нормальные браузеры (ff, opera, safari) рисуют границу таблицы внутри ее самой, а IE рисует границу "снаружи" таблицы. В итоге у меня на темном фоне черную границу не было попросту видно. А теперь внимание вопрос: как заставить IE рисовать бордер внутри таблицы?  Сообщение отредактировал AcetoN - Суббота, 27 Фев 2010, 03:57:09
|
|
AcetoN, попробуйте добавить опцию outset, т.е. выглядеть будет примерно так:
Code border: 5px outset dashed #000000 Для цветных рамок создастся наружный рельеф, а для чёрной он будет не виден, поэтому должно нормально отобразиться. Для всех благодарностей: + в репутацию.
Вопрос вопросов: форма даты |
|
Quote (Miss_Esq) Во первых , что это за значение ? : z-index: -10; , в этом теге поддерживаются только положительные значения Это только в старых версиях FireFox, в остальных поддерживается: http://www.htmlbook.ru/css/z-index.html Для всех благодарностей: + в репутацию.
Вопрос вопросов: форма даты |
|
Народ, может кто сталкивался
структура сайта блочная, позиционирование блоков посредством float соответсвенно в коде присутствует отмена обтекания Code <div style="clear:both;height:0px"></div> во всех браузерах всё путём, но вот ie после div делает переход на новую строку, то есть появляются лишние вертикальные промежутки, что вытягиевает всю страницу. Code height:0px Сообщение отредактировал Гарик_ - Пятница, 16 Апр 2010, 17:50:32
|
|
В ИЕ и в Лисе шрифт отображаются меньше чем на самом деле, в строке
Quote Комментов: 2 | Просмотров: 164 | Автор: Admin | Дата: 13.07.2010, 13:50 сделал для и для ИЕ и для FF свой файл с этими стилями. стиль Code .eDetails {border-top:1px dashed red;font-family:Verdana,Tahoma,Arial,Sans-Serif;color:#636363;padding-bottom:5px;padding-top:3px;text-align:left;font-size:20pt;} на странице вид материалов пишу Code <link href="/_st/my.css" rel="StyleSheet" type="text/css"> <!--[if IE]><link rel="stylesheet" type="text/css" href="/style/ie.css" /><![endif]--> <!--[if ff]><link rel="stylesheet" type="text/css" href="/style/ff.css" /><![endif]--> почему FF не хочет видеть эти стили? не понимаю сейчас и в ИЕ опять все плохо Сейчас заметил что в ИЕ если зайдешь под админом, то все нормално становится, если гостем или другим под другой группой зайти то все остается так же. Сообщение отредактировал meys - Вторник, 17 Авг 2010, 01:10:27
|
|
meys,
Quote (meys) почему FF не хочет видеть эти стили? - И никогда не увидит .... Рассмешил, чесслово ... Quote <!--[if ff]><link rel="stylesheet" type="text/css" href="/style/ff.css" /><![endif]--> Читай .... Условные_комментарии Такая конструкция работать не будет - Для мозиллы таких нет. Только для ие. Для мозиллы - пользуйся хаками. Либо пиши для мозиллы в общую, а для ие - в ие таблицу. ... Или вот ещё вариант - подключай таблицу стилей для разных браузеров операторами - например Quote <?if($USER_AGENT$='ie')?><link rel="stylesheet" type="text/css" ...... "/><?endif?> <?if($USER_AGENT$='firefox')?><link rel="stylesheet" type="text/css" ...... "/><?endif?> .... и так далее ヅ ... или скриптом ... Quote if($.browser.msie){ .... подключаем css .... } ... ... Всё написанное выше - моё личное мнение и на абсолютную правоту не претендует.
Есть вопросы лично ко мне - пиши сюда: http://likbezz.ru/forum/8 Сообщение отредактировал fflesh - Вторник, 17 Авг 2010, 01:34:21
|
|
BlacKHaWK, Писать нужно с какой версией IE видят кавардак. Если меньше чем IE 8 , забудь , пусть ставят IE 8 или IE 9. C Opera 11 и IE 9 в разных режимах выглядит одинаково. В Mozilla FireFox 3.6 поный хлам.
Doctype убери со страниц шаблонов и поставь <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> в специальное поле для Doctype в Общих настройках сайта в ПУ. А вообще лучше переделать всё заново с нуля. Не годится ни куда такой шаблон вид которого менялтся в зависимости от того вошёл на сайт как гость или пользователь . Only Windows 7. Only Internet Explorer 9. Only Ms SPD, all other error.
|
|
BlacKHaWK, каждый доктайп имеет свои строгие стандарты, не каждый браузер понимает тот или иной тег, поэтому каждый браузер отображает все по разному, но если следовать строго стандартам, то сайт будет отображаться везде одинаково
спасибо в репутацию
|
|
BlacKHaWK,
Quote Что это все таки было Only Windows 7. Only Internet Explorer 9. Only Ms SPD, all other error.
|
|
Проблема со всеми браузерами, кроме Опера.
Ссылка: minigdz.3dn.ru/index/0-16 если заходить через оперу, оперу мини или оперу мобайл все работает отлично. Вводим "1", нажимаем "найти" и снизу "подгружается" картинка с первым номером. Сайт сделан под телефон, и я думал, что все заходят через оперу мини, и все работает. Но некоторые заходят через обычный браузер телефона, у них картинка не подгружается. Да и если зайти через хром, фф или ИЕ картинка тоже не подгружается.  Что делать не знаю. |
|
nikolik, вот в этой части кода ошибка
Code <script> function simage() { var a = document.getElementById("search"); var textt = a.value; var b = document.getElementById("pic"); b.innerHTML = ''; b.innerHTML = '<img src="/11/alg/u1/r1/'+textt+'.jpg"'; } </script> У вас создается незакрытый тег. По идее, он и в опере отображаться не должен. Предпоследняя строчка должна выглядеть так: Code b.innerHTML = '<img src="/11/alg/u1/r1/'+textt+'.jpg" />'; Да, я такой
|
| |||