Модератор форума: Yuri_G  
Оптимизация дизайна под разные браузеры
Модератор форума
Сообщение # 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
brodyaga30
Сообщений: 491
Репутация: 146

Сообщение # 706 | 18:25:09
Quote (papa_aa)
В общих настройках менял !DOCTYPE разные вставлял не помогло. Что можете посоветовать? Где что ни так?
Подгоняют не доктайп под вёрстку, а наоборот, точнее даже не подгоняют, а делают код кроссбраузерным и валидным

Выбираете доктайп ...и уже под ним работаете, а так в принципе в шаблонах по любому что то придётся править, но сначала доктайп, а потом код

Понял тебя, тридцатый ...
rzet-777
Сообщений: 159
Репутация: 33

Сообщение # 707 | 18:32:49
Code
/* The Times New Roman-based serif stack: */    
font-family: Cambria, "Hoefler Text", Utopia, "Liberation Serif", "Nimbus Roman No9 L Regular", Times, "Times New Roman", serif;    

/* A modern Georgia-based serif stack:*/    
font-family: Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif," "Bitstream Vera Serif", "Liberation Serif", Georgia, serif;    

/*A more traditional Garamond-based serif stack:*/    
font-family: "Palatino Linotype", Palatino, Palladio, "URW Palladio L", "Book Antiqua", Baskerville, "Bookman Old Style", "Bitstream Charter", "Nimbus Roman No9 L", Garamond, "Apple Garamond", "ITC Garamond Narrow", "New Century Schoolbook", "Century Schoolbook", "Century Schoolbook L", Georgia, serif;    

/*The Helvetica/Arial-based sans serif stack:*/    
font-family: Frutiger, "Frutiger Linotype", Univers, Calibri, "Gill Sans", "Gill Sans MT", "Myriad Pro", Myriad, "DejaVu Sans Condensed", "Liberation Sans", "Nimbus Sans L", Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif;    

/*The Verdana-based sans serif stack:*/    
font-family: Corbel, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", "Bitstream Vera Sans", "Liberation Sans", Verdana, "Verdana Ref", sans-serif;    

/*The Trebuchet-based sans serif stack:*/    
font-family: "Segoe UI", Candara, "Bitstream Vera Sans", "DejaVu Sans", "Bitstream Vera Sans", "Trebuchet MS", Verdana, "Verdana Ref", sans-serif;    

/*The heavier “Impact” sans serif stack:*/    
font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", Charcoal, "Helvetica Inserat", "Bitstream Vera Sans Bold", "Arial Black", sans-serif;    

/*The monospace stack:*/    
font-family: Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace;

/***** Selector Hacks ******/    
       
/* IE6 and below */    
* html #uno { color: red }    
       
/* IE7 */    
*:first-child+html #dos { color: red }    
       
/* IE7, FF, Saf, Opera */    
html>body #tres { color: red }    
       
/* IE8, FF, Saf, Opera (Everything but IE 6,7) */    
html>/**/body #cuatro { color: red }    
       
/* Opera 9.27 and below, safari 2 */    
html:first-child #cinco { color: red }    
       
/* Safari 2-3 */    
html[xmlns*=""] body:last-child #seis { color: red }    
       
/* safari 3+, chrome 1+, opera9+, ff 3.5+ */    
body:nth-of-type(1) #siete { color: red }    
       
/* safari 3+, chrome 1+, opera9+, ff 3.5+ */    
body:first-of-type #ocho { color: red }    
       
/* saf3+, chrome1+ */    
@media screen and (-webkit-min-device-pixel-ratio:0) {    
    #diez { color: red }    
}    
       
/* iPhone / mobile webkit */    
@media screen and (max-device-width: 480px) {    
    #veintiseis { color: red }    
}    
       
/* Safari 2 - 3.1 */    
html[xmlns*=""]:root #trece { color: red }    
       
/* Safari 2 - 3.1, Opera 9.25 */    
*|html[xmlns*=""] #catorce { color: red }    
       
/* Everything but IE6-8 */    
:root *> #quince { color: red }    
       
/* IE7 */    
*+html #dieciocho { color: red }    
       
/* Firefox only. 1+ */    
#veinticuatro, x:-moz-any-link { color: red }    
       
/* Firefox 3.0+ */    
#veinticinco, x:-moz-any-link, x:default { color: red }    
       
/***** Attribute Hacks ******/    
       
/* IE6 */    
#once { _color: blue }    
       
/* IE6, IE7 */    
#doce { *color: blue; /* or #color: blue */ }    
       
/* Everything but IE6 */    
#diecisiete { color/**/: blue }    
       
/* IE6, IE7, IE8 */    
#diecinueve { color: blue\9; }    
       
/* IE7, IE8 */    
#veinte { color/*\**/: blue\9; }    
       
/* IE6, IE7 -- acts as an !important */    
#veintesiete { color: blue !ie; } /* string after ! can be anything */
       
/* RESET */

Html, body, div, span, applet, object, iframe, caption, tbody, tfoot, thead, th,    
del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var,    
    blockquote, pre, a, abbr, acronym, address, big, cite, code,    
dl, dt, dd, ol, ul, li, fieldset, form, label, legend {    
    vertical-align: baseline;    
    font-family: inherit;    
    font-weight: inherit;    
    font-style: inherit;    
    font-size: 100%;    
    outline: 0;    
    padding: 0;    
    margin: 0;    
    border: 0;    
    }    
/* remember to define focus styles! */    
:focus {    
    outline: 0;    
    }    
body {    
    background: white;    
    line-height: 1;    
    color: black;    
    }    
ol, ul {    
    list-style: none;    
    }    
/* tables still need cellspacing="0" in the markup */    
table {    
    border-collapse: separate;    
    border-spacing: 0;    
    }    
caption, th, td {    
    font-weight: normal;    
    text-align: left;    
    }    
/* remove possible quote marks (") from <q> & <blockquote> */    
blockquote:before, blockquote:after, q:before, q:after {    
    content: "";    
    }    
blockquote, q {    
    quotes: "" "";    
    }


Последняя часть кода это RESET меняйте на свои значения если надо а лучше удалите не нужное от сюда
Code
Html, body, div, span, applet, object, iframe, caption, tbody, tfoot, thead, th,    
del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var,    
    blockquote, pre, a, abbr, acronym, address, big, cite, code,    
dl, dt, dd, ol, ul, li, fieldset, form, label, legend
,чтоб на них сброс стиля не подействовал .У меня все норм стало во всех браузерах.

Доктип вот этот у меня
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Сообщение отредактировал rzet-777 - Пятница, 07 Дек 2012, 18:52:08
papa_aa
Сообщений: 4
Репутация: 0

Сообщение # 708 | 22:25:46
Quote (rzet-777)
Последняя часть кода это RESET меняйте на свои значения если надо а лучше удалите не нужное от сюдаHtml, body, div, span, applet, object, iframe, caption, tbody, tfoot, thead, th,
del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var,
blockquote, pre, a, abbr, acronym, address, big, cite, code,
dl, dt, dd, ol, ul, li, fieldset, form, label, legend1
2
3
4
,чтоб на них сброс стиля не подействовал .У меня все норм стало во всех браузерах.

Доктип вот этот у меня

Добавлено (08-Дек-2012, 22:25:46)
---------------------------------------------
Quote (brodyaga30)
В IE 9 отображается нормально, вы с какой версией смотрите ? Кроссбраузерность подгоняйте подо все обозреватели последних версий, одинаковое отображение во всех обозревателях задача реально решаемая ...
Подгоняют не доктайп под вёрстку, а наоборот, точнее даже не подгоняют, а делают код кроссбраузерным и валидным
Quote (Miss_Esq)
В IE 9 отображается нормально, вы с какой версией смотрите ? Кроссбраузерность подгоняйте подо все обозреватели последних версий, одинаковое отображение во всех обозревателях задача реально решаемая ..
Спасибо всем за ответы. Суть я понял но вот воплощение нет, т.к. впервые столкнулся с "код кроссбраузерным" буду изучать в интернете и пробовать методом проб и ошибок.
Хотя если кто нибудь покажет мне пример хотя бы одного измененного "Кроссбраузерность" на примере моего сайта буду очень признателен!!!
Сообщение отредактировал papa_aa - Суббота, 08 Дек 2012, 22:26:41
Miss_Esq
Сообщений: 13859
Репутация: 4159
Уровень замечаний:

Сообщение # 709 | 22:33:14
papa_aa,
Quote
пробовать методом проб и ошибок
Пльзуйтесь полноразмерным HTML редактором, проще достичь кроссбраузерности, это дело времени, опыта .....

brodyaga30
Сообщений: 491
Репутация: 146

Сообщение # 710 | 22:34:08
papa_aa, не мои слова
Quote (papa_aa)
В IE 9 отображается нормально, вы с какой версией смотрите ? Кроссбраузерность подгоняйте подо все обозреватели последних версий, одинаковое отображение во всех обозревателях задача реально решаемая ...
.... smile
Quote (papa_aa)
впервые столкнулся с "код кроссбраузерным"
когда сайт по всем браузерам работает одинаково ( т.е то что задумано) ... желательно валидный, но под старые версии валидность врятли получится, особенно для ИЕ, если по CSS то составьте для них ( версии ИЕ) дополнительные стили, и выводите их только для ИЕ

Понял тебя, тридцатый ...
papa_aa
Сообщений: 4
Репутация: 0

Сообщение # 711 | 22:37:20
Quote (Miss_Esq)
Пльзуйтесь полноразмерным HTML редактором, проще достичь кроссбраузерности, это дело времени, опыта .....
А это какая-то программа? Я просто пользуюсь dreamweaver, эта подойдет?
Miss_Esq
Сообщений: 13859
Репутация: 4159
Уровень замечаний:

Сообщение # 712 | 22:39:45
brodyaga30,
Quote
но под старые версии
Только радикально больные на всю голову пытаются устроить кроссбраузерность для Internet Explorer младше 8 версии .... выпущенные при царе горохе ...

papa_aa,
Quote
эта подойдет
Может быть, используем только Microsoft SharePoint Designer 2007 ...

Сообщение отредактировал Miss_Esq - Суббота, 08 Дек 2012, 22:41:36
papa_aa
Сообщений: 4
Репутация: 0

Сообщение # 713 | 22:42:12
Quote (brodyaga30)
особенно для ИЕ, если по CSS то составьте для них ( версии ИЕ) дополнительные стили, и выводите их только для ИЕ
Просто нет слов хороших про это ИЕ даже старше 8!!! И так сам по себе тормозит, так ещё и тут тормозит процесс для верстальщиков сайтов angry

Добавлено (08-Дек-2012, 22:42:12)
---------------------------------------------

Quote (Miss_Esq)
Может быть, используем только Microsoft SharePoint Designer 2007 ...
Спасибо глянет
Сообщение отредактировал papa_aa - Суббота, 08 Дек 2012, 22:41:34
brodyaga30
Сообщений: 491
Репутация: 146

Сообщение # 714 | 00:54:16
...кально на всю голову создателям ИЕ ... даже после 8 ...
а так же всем кто не обновляет версию браузера ....
......
Ваше мнение я помню по поводу ИЕ ...
... недобраузер, и макрософагу на него пофиг ... какой он и что с ним, это аппендицит их ОС ... по другому не скажешь

уф ....сорри что то занесло меня ... зима однако smile

Понял тебя, тридцатый ...
Zodiaq
Сообщений: 14
Репутация: 10

Сообщение # 715 | 11:35:56
Кто может помочь с убр багов сайта play-cheat.at.ua
Во всех браузерах шаблон нормально стоит кроме ИЕ
Nightrunner
Сообщений: 22
Репутация: 12

Сообщение # 716 | 19:51:39
Хао всем. Что посоветуете в плане заглушки на IE 6, 7, 8?

На девятом можно, сжав зубы, смотреть на своё творение, в более ранних творится сущий ад. Тратить на них время не собираюсь.

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

Сообщение # 717 | 20:13:43
Nightrunner,
Цитата
IE 6, 7, 8?

Забудьте ...
IE 6 - выпущен раньше чем выпущенна XP .... в ппошлом веке ....
IE 7 - реликт ....
максмум совместимость под IE 8 - ...... делать всё под IE 9 ...

Цитата
На девятом можно, сжав зубы, смотреть на своё творение,
Вы просто не умеете их готовить ....

Сообщение отредактировал Miss_Esq - Пятница, 28 Дек 2012, 20:15:15
Nightrunner
Сообщений: 22
Репутация: 12

Сообщение # 718 | 20:30:47
Miss_Esq, то есть, сделать под IE 9 и фиг с ним?) Всё же, не хотелось, чтобы кто в древних браузерах смотрел на сайт и ржал. biggrin

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

Сообщение # 719 | 20:34:24
Nightrunner, Делаю только под IE 9 .... с оглядкой на Firefox, Google chrome и Opera .... Ржут только те кто вообще не в теме ...

sch779
Сообщений: 703
Репутация: 348

Сообщение # 720 | 22:50:11
Цитата (Nightrunner)
сделать под IE 9 и фиг с ним?)

Если Вы нормально сделаете под IE9, то 100% нормально будет идти под IE8 и, возможно с незначительными артефактами, под IE7.
Под IE6, как показывает статистика, остались считанные доли процентов компов - расчитывать на них, как правильно подметила Miss_Esq, глупо!
Лучше потратьте это время на создание действительно кроссбраузерного дизайна - такой будет одинаково хоро смотрется и на IE!
Поиск:
Telegram
Будьте в курсе всех обновлений: подпишитесь на наш официальный Telegram-канал uCoz и задавайте вопросы в чате сообщества!