Страница 1 из 611236061»
Модератор форума: Yuri_G 
Сообщество uCoz » Мастерская uCoz » Дизайн: управление шаблонами » Оптимизация дизайна под разные браузеры
Оптимизация дизайна под разные браузеры
Модератор форума
Сообщение # 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
rusak
Сообщений: 101
Сообщение # 2 | 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
Andre
Сообщений: 342
Репутация: 140

Сообщение # 3 | 23:42:52
Советую вместо <hr>, который красиво может выглядить только в ИЕ использовать цветную однопиксельную картинку:
<img src="путь до картинки/hr.gif" class="hr">
и прописать ее в стилях:
.hr {height: 1px; width: 100%; margin-top: 5px; margin-bottom: 5px;}

Надеюсь тему я правильно понял biggrin

kydapodatsya
Сообщений: 2
Репутация: 44
Уровень замечаний:

Сообщение # 4 | 11:24:48
Quote (rusak)
Проблема с отображением тега HR

вот еще небольшое решение
Code
<style type="text/css">
HR {
  border: none; /* Убираем границу для браузера Firefox */
  color: red; /* Цвет линии для браузера Internet Explorer */
  background-color: red; /* Цвет линии для браузера Firefox и Opera */
  height: 2px; /* Толщина линии */
}
</style>

источник

www.vopros.ucoz.ru - Сайт-помощник системы Ucoz
okstyle
Сообщений: 63
Репутация: 46

Сообщение # 5 | 14:51:06
Ещё пару особенностей. На этот раз косяки в Internet Explorer.

Делая динамическое меню, столкнулся с некоторыми трудностями. Вот проблемы их решения:

К несчастью, IE Win понимает разрывы строк между ссылками как незаполненное пространство. Из-за этого в IE вы видите, что ссылки не прилегают тесно одна к другой. Однако этот баг IE можно обойти.

Code
/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
/* End */

Выше мы применили трюк Holly Hack, которые прячет эти правила от всех браузеров, кроме IE Win. Обратите внимание, что было добавлено правило height: 1%. К сожалению (опять!), борясь с одной ошибкой, мы выткнулись на другую, для борьбы с которой требуется задать значение для атрибута "height", чтобы ссылки отображались как блочные элементы.

IE понимает псевдокласс :hover лишь для тега - так что li:hover ему ни о чём не говорит.

Решить можно при помощи java-script:

Code
<script>
startList = function() {
       if (document.all&&document.getElementById) {
             navRoot = document.getElementById("nav");
             for (i=0; i<navRoot.childNodes.length; i++) {
                   node = navRoot.childNodes[i];
                   if (node.nodeName=="LI") {
                         node.onmouseover=function() {
                    this.className+=" over";
                         }
                         node.onmouseout=function() {
                    this.className=this.className.replace(" over", "");
                         }
                   }
             }
       }
}
window.onload=startList;
</script>

Таким образом, вид стиля:

Code
li:hover ul, li.over ul { display: block;}

В шестой версии IE для "li a" необходимо задать фон, иначе если выпадающее подменю будет больше (по высоте), чем само родительское меню, то часть ссылок просто исчезнет с экрана ещё до того, как вы сможете кликнуть по ним.


Для всех благодарностей: + в репутацию.
Вопрос вопросов: форма даты
rusak
Сообщений: 101
Репутация: 121

Сообщение # 6 | 16:57:19
Решаем проблему с прозрачностью картинок PNG в ИЕ: http://www.tigir.com/alpha_png.htm

Всё, что вы знаете обо мне — ложь и клевета. Вся правда в твиттере и на сайте.
rusak
Сообщений: 101
Репутация: 121

Сообщение # 7 | 00:11:07
fozzy, кстати говоря. определить браузер можно просто так:

Code
<!--[if lte IE]>
Сюда текст, который будет виден только если браузер IE
<![endif]-->

Всё, что вы знаете обо мне — ложь и клевета. Вся правда в твиттере и на сайте.
vitaly576
Сообщений: 316
Репутация: 218

Сообщение # 8 | 11:14:17
нашел в инете интересную штучку:
С помощью этого хака можно будет изменять вид вашего сайта(редактируемой странички) для любого браузера и любой ОС в отдельности.
Смотрим код:
Code
<script type="text/javascript">  
    var cssFix = function(){  
    var u = navigator.userAgent.toLowerCase(),  
    addClass = function(el,val){  
      if(!el.className) {  
        el.className = val;  
      } else {  
        var newCl = el.className;  
        newCl+=(" "+val);  
        el.className = newCl;  
      }  
    },  
    is = function(t){return (u.indexOf(t)!=-1)};  
    addClass(document.getElementsByTagName('html')[0],[  
      (!(/opera|webtv/i.test(u))&&/msie (\d)/.test(u))?('ie ie'+RegExp.$1)  
        :is('firefox/2')?'gecko ff2'  
        :is('firefox/3')?'gecko ff3'  
        :is('gecko/')?'gecko'  
        :is('opera/9')?'opera opera9':/opera (\d)/.test(u)?'opera opera'+RegExp.$1  
        :is('konqueror')?'konqueror'  
        :is('applewebkit/')?'webkit safari'  
        :is('mozilla/')?'gecko':'',  
      (is('x11')||is('linux'))?' linux'  
        :is('mac')?' mac'  
        :is('win')?' win':''  
    ].join(" "));  
}();  
</script>

Изменять css свойства для разных браузеров мы будем с помощью следующих css классов:

Классы ОС:
.win - Windows
.linux - Linux
.mac - MacOS

Классы браузеров:
.ie - все версии ИЕ
.ie8 - ИЕ 8.х
.ie7 - ИЕ 7.x
.ie6 - ИЕ 6.x
.ie5 - ИЕ 5.x
.gecko - все версии фаерфокса, и остальные гекко-браузеры
.ff2 - фаерфокс 2
.ff3 - фаерфокс 3
.opera - все версии оперы
.opera8 - опера 8.x
.opera9 - опера 9.x
.konqueror - konqueror
.safari - сафари

К примеру на нужно изменить цвет шрифта для третьей версии Firefox запущенной под Windows.

Code
.win .ff3 {  

color: #000000;  

}

Единственный минус этого способа — javascript, так что все юзеры с отключенным javascript’ом отсекаются.

--=sTs=--
Репутация: -7

Сообщение # 9 | 13:09:02
Если кому лень устанавливать на компьютер все известные ему браузеры, то можно бесплатно воспользоваться этим сервисом prof

okstyle
Сообщений: 63
Репутация: 46

Сообщение # 10 | 17:17:19
Определение браузера, самая полная информация, версия браузера, информация о поддержке javascript, поддержке java.

Code
// from http://www.mozilla.org/docs/web-developer/sniffer/browser_type.html
// convert all characters to lowercase to simplify testing
var agt=navigator.userAgent.toLowerCase();
// *** BROWSER VERSION ***
// Note: On IE5, these return 4, so use is_ie5up to detect IE5.
var is_major = parseInt(navigator.appVersion);
var is_minor = parseFloat(navigator.appVersion);
// Note: Opera and WebTV spoof Navigator. We do strict client detection.
// If you want to allow spoofing, take out the tests for opera and webtv.
var is_nav = ((agt.indexOf('mozilla')!=-1) && (agt.indexOf('spoofer')==-1)
&& (agt.indexOf('compatible') == -1) && (agt.indexOf('opera')==-1)
&& (agt.indexOf('webtv')==-1) && (agt.indexOf('hotjava')==-1));
var is_nav2 = (is_nav && (is_major == 2));
var is_nav3 = (is_nav && (is_major == 3));
var is_nav4 = (is_nav && (is_major == 4));
var is_nav4up = (is_nav && (is_major >= 4));
var is_navonly = (is_nav && ((agt.indexOf(";nav") != -1) ||
(agt.indexOf("; nav") != -1)) );
var is_nav6 = (is_nav && (is_major == 5));
var is_nav6up = (is_nav && (is_major >= 5));
var is_gecko = (agt.indexOf('gecko') != -1);
var is_ie = ((agt.indexOf("msie") != -1) && (agt.indexOf("opera") == -1));
var is_ie3 = (is_ie && (is_major < 4));
var is_ie4 = (is_ie && (is_major == 4) && (agt.indexOf("msie 4")!=-1) );
var is_ie4up = (is_ie && (is_major >= 4));
var is_ie5 = (is_ie && (is_major == 4) && (agt.indexOf("msie 5.0")!=-1) );
var is_ie5_5 = (is_ie && (is_major == 4) && (agt.indexOf("msie 5.5") !=-1));
var is_ie5up = (is_ie && !is_ie3 && !is_ie4);
var is_ie5_5up =(is_ie && !is_ie3 && !is_ie4 && !is_ie5);
var is_ie6 = (is_ie && (is_major == 4) && (agt.indexOf("msie 6.")!=-1) );
var is_ie6up = (is_ie && !is_ie3 && !is_ie4 && !is_ie5 && !is_ie5_5);
// KNOWN BUG: On AOL4, returns false if IE3 is embedded browser
// or if this is the first browser window opened. Thus the
// variables is_aol, is_aol3, and is_aol4 aren't 100% reliable.
var is_aol = (agt.indexOf("aol") != -1);
var is_aol3 = (is_aol && is_ie3);
var is_aol4 = (is_aol && is_ie4);
var is_aol5 = (agt.indexOf("aol 5") != -1);
var is_aol6 = (agt.indexOf("aol 6") != -1);
var is_opera = (agt.indexOf("opera") != -1);
var is_opera2 = (agt.indexOf("opera 2") != -1 || agt.indexOf("opera/2") != -1);
var is_opera3 = (agt.indexOf("opera 3") != -1 || agt.indexOf("opera/3") != -1);
var is_opera4 = (agt.indexOf("opera 4") != -1 || agt.indexOf("opera/4") != -1);
var is_opera5 = (agt.indexOf("opera 5") != -1 || agt.indexOf("opera/5") != -1);
var is_opera6 = (agt.indexOf("opera 6") != -1 || agt.indexOf("opera/6") != -1);
var is_opera5up = (is_opera && !is_opera2 && !is_opera3 && !is_opera4);
var is_webtv = (agt.indexOf("webtv") != -1);  
var is_TVNavigator = ((agt.indexOf("navio") != -1) || (agt.indexOf("navio_aoltv") != -1));  
var is_AOLTV = is_TVNavigator;
var is_hotjava = (agt.indexOf("hotjava") != -1);
var is_hotjava3 = (is_hotjava && (is_major == 3));
var is_hotjava3up = (is_hotjava && (is_major >= 3));
// *** JAVASCRIPT VERSION CHECK ***
var is_js;
if (is_nav2 || is_ie3) is_js = 1.0;
else if (is_nav3) is_js = 1.1;
else if (is_opera5up) is_js = 1.3;
else if (is_opera) is_js = 1.1;
else if ((is_nav4 && (is_minor <= 4.05)) || is_ie4) is_js = 1.2;
else if ((is_nav4 && (is_minor > 4.05)) || is_ie5) is_js = 1.3;
else if (is_hotjava3up) is_js = 1.4;
else if (is_nav6 || is_gecko) is_js = 1.5;
// NOTE: In the future, update this code when newer versions of JS
// are released. For now, we try to provide some upward compatibility
// so that future versions of Nav and IE will show they are at
// *least* JS 1.x capable. Always check for JS version compatibility
// with > or >=.
else if (is_nav6up) is_js = 1.5;
// NOTE: ie5up on mac is 1.4
else if (is_ie5up) is_js = 1.3
// HACK: no idea for other browsers; always check for JS version with > or >=
else is_js = 0.0;
// end of browser detection

Данный фрагмент должен располагается в самом начале страницы. Определяемые им константы(is_ie, is_nav и т.д.) затем могут использоваться в любых других javascript фрагментах, используемых на странице(главное чтобы этот код определения выполнился раньше любых других фрагментов конечно). Самая полная информация о браузере и поддерживаемых им стандартах: тип, точная версия браузера, версия поддерживаемого javascript-а, распознавание java. Распознает браузеры: Internet Explorer (до 6+ версий), Netscape Navigator (до 6+ версий), Opera (начиная с 2-ой версии по последние), Mozzila.

Определение типа браузера

Code
<script language="JavaScript">  
<!--   
if (navigator.appName == "Netscape")  window.location.href = "Netscape.htm";  
else if  (navigator.appName == "Microsoft Internet Explorer")  window.location.href = "explorer.htm";  
else window.location.href = "neizvestniy_brauser.htm";  
// -->  
</script>

Используйте html код для пересылки со странички на другие странички в зависимости от типа браузера используемого пользователем.

Quote (alhimik33)
Где сделать изменения и какие, чтобы увеличить шрифт меню сайта?

Всё зависит от класса, используемого в ссылках меню. Обычно настраивается в css или в самом глобальном блоке меню.

Quote (alhimik33)
Почему в Internet Explorere сайт отображается некорректно, что сделать чтоб сайт отображался как надо?

Использовать табличную разметку, вместо div'ов happy

Dagger500, Firefox 3.0.5, Internet Explorer 8 отображают с белым фоном, а опера с серо-синим (http://browsershots.org/http://serialstv.ucoz.ru/)... Могу предложить явно указать bgcolor для таблицы контента.


Для всех благодарностей: + в репутацию.
Вопрос вопросов: форма даты
Сообщение отредактировал okstyle - Суббота, 18 Июл 2009, 17:22:39
YuriT
Сообщений: 231
Репутация: 701
Уровень замечаний:

Сообщение # 11 | 20:16:37
alhimik33,
Quote (alhimik33)
Почему в IE не отображаются картинки? И как это исправить?

Ну ядрен-батон, я же уже Вам, по-моему, минимум дважды объяснял: потому что в коде картинок у Вас зачем-то стоят вот такие странные атрибуты:
Code
alt="null" height="null" width="null"

Новые браузеры их просто игнорируют, а IE интерпретирует эти null как 0, и соответственно выдает картинку нулевого размера.

Потеряшка - поиск потерянных и помощь бездомным животным в Питере
Сообщение отредактировал YuriT - Вторник, 28 Июл 2009, 19:36:47
toster
Репутация: 18

Сообщение # 12 | 23:28:39
Sergysu,
Code
display: table-cell
не поддерживается IE.

Кроме того IE мне ругнулся следующим образом:

Quote
Error #2044: Необработанный securityError:. text=Error #2048: Нарушение изолированной среды: http://rutube.ru/player.....z.ru%2F не может загрузить данные из http://www.tns-counter.ru/V13a***R >http://qrabbits.ucoz.ru/*rutube_ru/ru/KOI8-R/tmsec=rutube_player/.
at Components.Utils::Statistic/statReport()
at Controller/init()
at Flvplayer3/init()
at Flvplayer3/onLoadEnvCompleteHandler()
at flash.events::EventDispatcher/dispatchEventFunction()
at flash.events::EventDispatcher/dispatchEvent()
at flash.net::URLLoader/onComplete()

«Сидящий в куче говна вони не чувствует»
Китайская народная пословица.
Сообщение отредактировал toster - Вторник, 28 Июл 2009, 23:30:23
Bomjarik
Сообщений: 3
Репутация: 5

Сообщение # 13 | 21:42:24
Хм недавно обнаружыл баг, может каму то будет полезно...в опере текст отображался большыми буквами...а в IE и Mazil'e норм. Баг заключался в том что в CSS стильях небуло строки .eMessage {font-size:8pt;} которая отвечат за отображения текста в неполной новости. Что б исправить это заходим в CSS стили и находим там:
Code
/* Entries Style */
.eBlock {}
.eTitle {font-family:Verdana,Arial,Sans-Serif;font-size:13px;font-weight:bold;color:#E4FAFD; padding: 0 0 0 18px; background: url('/.s/t/731/24.gif') no-repeat 0 1px;}
.eTitle a:link {text-decoration:underline; color:#E4FAFD;}
.eTitle a:visited {text-decoration:underline; color:#E4FAFD;}
.eTitle a:hover {text-decoration:none; color:#FFFFFF;}
.eTitle a:active {text-decoration:underline; color:#E4FAFD;}

.eText {text-align:justify; padding:5px;border-top:1px dashed #4D4D56;}

.eDetails {border-top:1px dashed #2B2B30;border-bottom:1px dashed #2B2B30;color:#60606B;padding-bottom:5px;padding-top:3px;text-align:left;font-size:7pt;}
.eDetails1 {border-top:1px dashed #2B2B30;border-bottom:1px dashed #2B2B30;color:#60606B;padding-bottom:5px;padding-top:3px;text-align:left;font-size:8pt;}
.eDetails2 {border-top:1px dashed #2B2B30;border-bottom:1px dashed #2B2B30;color:#60606B;padding-bottom:5px;padding-top:3px;text-align:left;font-size:8pt;}

.eRating {font-size:7pt;}

.eAttach {margin: 16px 0 0 0; padding: 0 0 0 15px; background: url('/.s/t/731/25.gif') no-repeat 0px 0px;}
/* --------------- */

Мы видим что после етой строки пусто:
Code
.eText {text-align:justify; padding:5px;border-top:1px dashed #4D4D56;}

А там должен стоять етот код:
Code
.eMessage {font-size:8pt;}

З.Ы. незнаю точно ли там етот код нада ставить пробуйте ставить и в других местах если вам инитиресно...я поставил там по интуицыи))) у меня тепрь в опере отображаетса нормальный размер шрифта wink
Сообщение отредактировал Bomjarik - Вторник, 03 Ноя 2009, 21:43:22
Вагнер-Р[eng]AV
Сообщений: 52
Репутация: 57

Сообщение # 14 | 15:02:31
В Mozilla и Opera не работает атрибут alt тега IMG, при наведении курсора на изображение подсказка не появляется. В IE всё окей. Все браузеры последних версий. Зато IE "не понимает" грузинский (ну или хотя бы греческий) язык, появляется рядок таких вопросиков (хорошо заметно в Википедии), но если войти на сайт как пользователь, то этой проблемы нет... Косячки-с!

з. ы. Может я в чём и ошибаюсь У меня так.


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

Сообщение # 15 | 18:51:07
Вагнер-Р[eng]AV,

Quote
Mozilla и Opera не работает атрибут alt тега IMG, при

alt - описание изображения при выключенном отображении изображений , а за всплывающую подсказку отвечает тег - title


Сообщество uCoz » Мастерская uCoz » Дизайн: управление шаблонами » Оптимизация дизайна под разные браузеры
Страница 1 из 611236061»
Поиск: