Чат сообщества
   | |
| Модератор форума: 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 |
|
Zdravstvuyte, problema s otobrazheniem saita v Mozilla http://www.carauction.ge/ , vo vsex ostal'niz brauzerax rabotaet normal'no. pomogite pozhaluisto
Сообщение отредактировал Alex55555 - Четверг, 13 Мар 2014, 04:20:52
|
|
Alex55555,
Может проще и лучше начало шаблона прописать так ??? <table cellpadding="0" cellspacing="0" border="0" width="100%" style="padding: 0px;"> <tr> <td colspan="3"> $AHEADER$ </td> </tr> <tr> <td align="center"> <!-- <middle> --> <table border="0" cellpadding="0" cellspacing="0" width="1300" bgcolor="#FFFFFF" style="padding:10px 10px 10px 10px;" > <tr> <td valign="top" width="200"> |
|
Здравствуйте, такая проблема, поставил баннер на сайт, посматривал в разных браузерах, везде отображается корректно, кроме мозилы, не загружаются изображения, и приписывается какой то несуществующий класс к img
Код <img class="ymxjixhoigyfvudsxgea" src="/banner/11.jpg"></img> |
|
|
|
Miss_Esq, ну да http://www.sadkostyle.ru/
|
|
Дино, вы все сделали так, чтобы ваши картинки никто не увидел из тех, кто пользуется различными резаками рекламы. если у вас в мозилле установлен анти-баннер, то конечно вы ничего не видите.
если хотите, чтобы ваши картинки видели, то никогда не называйте их banner и классы так не называйте и в комментах не пишите |
|
Искал решение вопроса на форуме, но не нашел, поэтому опишу проблему в более подходящей теме (тут).
На прошлой неделе изменили дизайн моих сайтов sgm.by и remon.by .... Изменения делала официальная служба юкоз - ucozlab . Дизайн сайтов очень нравиться, однако после проверки отображения в разных браузерах (с помощью сервиса: http://browsershots.org/ и http://netrenderer.com/) я понял, что мои сайты "мягко говоря" очень плохо отображаются в Internet Explorer 5.5; 6; 7; 9; 10. Примерно 20% посетителей приходят с этих браузеров. Разработчики подкорректировали отображение сайта в Internet Explorer 11, сказав, что в противном случае придется переделывать весь сайт (я это понимаю, т.к. некоторые функции будут работать по-другому). От себя придумал такое решение вопроса: Сделать проверку на браузер с помощью условных операторов <?if($код$)?><?else?><?endif?> Потом сделать редирект на pda версию сайта (она отображается корректно) И можно сделать какое-нить всплывающее сообщение, что мол обновите браузер для корректного отображения с сылкой на Internet Explorer 11 ЕСТЬ ОДНА БЕДА, подскажите, пожалуйста, кто-нить как сделать проверку на указанные браузеры? |
|
Цитата bandjuk (  )Aleks2006, используй операторы: $USER_AGENT$ - тип браузера (firefox, opera, safari, ie) $USER_AGENT_VER$ - версия браузера Но когда я вместо 'IE' меняю на ' opera ', то в опере все прекрасно работает ...  Добавлено (14 Окт 2014, 22:21:42) |
|
сайт evrohair.com
в Хроме и Яндексе все норм, в остальных (опере, фоксе и ИЕ) Кнопки с надписями уползают вниз. <!DOCTYPE html> что можно сделать? Прикрепления:
9137747.jpg
(187.5 Kb)
|
|
Remy9053, у меня все показывает нормально.
Сообщение отредактировал WasaBeS - Пятница, 13 Мар 2015, 16:10:09
|
|
Прошу взглянуть на тестовую страницу: http://masseffect-universe.com/index/test/0-43
Код: Код <div style="background:#2e3035;width:290px;height:290px;border: 5px solid#0090ff !important;border-radius:50px;-webkit-border-radius:50px;-moz-border-radius: 50px;-khtml-border-radius:50px;position:absolute;"> </div> Во всех нормальных браузерах рамка есть, в IE11 нет. Как решить проблему? |
|
Remy9053, каким образом, если не секрет?
Добавлено (13 Мар 2015, 20:47:49) --------------------------------------------- mrx, значение Код !important; Попробуйте: Код <div style="background:#2e3035;width:290px;height:290px;border: 5px solid #0090ff;border-radius:50px;-webkit-border-radius:50px;-moz-border-radius: 50px;-khtml-border-radius:50px;position:absolute;"> </div> Сообщение отредактировал WasaBeS - Пятница, 13 Мар 2015, 20:50:53
|
|
В верхней части сайта после navBar убираем <hr>
<div class="dataBar">$WDAY$, $DATE$, $TIME$<br><?if($USER_LOGGED_IN$)?><!--<s5200>-->Вы вошли как<!--</s>--> <a href="$PERSONAL_PAGE_LINK$"><b>$USERNAME$</b></a> | <!--<s3167>-->Группа<!--</s>--> "<u>$USER_GROUP$</u>"<?else?><!--<s5212>-->Приветствую Вас<!--</s>--> <b>$USERNAME$</b><?endif?></div> <div class="logoBlock"><h1><!-- <logo> --><!-- </logo> --></h1></div> <div class="navBar"><a href="$HOME_PAGE_LINK$"><!--<s5176>-->Главная<!--</s>--></a><?if($USER_LOGGED_IN$)?> | <a href="$PERSONAL_PAGE_LINK$"><!--<s5214>-->Мой профиль<!--</s>--></a><?else?> | <a href="$REGISTER_LINK$"><!--<s3089>-->Регистрация<!--</s>--></a><?endif?> <?if($USER_LOGGED_IN$)?> | <a href="$LOGOUT_LINK$"><!--<s5164>-->Выход<!--</s>--></a><?else?> | <a href="$LOGIN_LINK$"><!--<s3087>-->Вход<!--</s>--></a><?endif?> <?if($RSS_LINK$)?>| <a href="$RSS_LINK$">RSS</a><?endif?></div> <hr> |
| |||