Война браузеров
 
Информатика в школе


Видео курсы для чайников фотошоп, joomla, wordpress, php, css 
  Главная  ●  Карта сайта
 
 

Война браузеров

Евгений Мухутдинов

[содержание]

 

Итак, напомню, что браузер - это программа предназначенная для просмотра веб-страниц. В XX веке появилось такое словосочетание, как "Война браузеров". Дело в том, что одни браузеры отображали веб-страницы так, как задумывал автор, а другие несли всякую отсебятину: смещали логотипы, изменяли отображение гиперссылок, неверно форматировали текст и т.д. и т.п.

Из-за чего это происходило? Как вы уже знаете, браузер отображает содержимое веб-страницы согласно html-разметке. Увидел, к примеру, контейнер <b>  </b> и отобразил его содержимое полужирным шрифтом. А как быть, если браузеру попался незнакомый тег? На практике это встречалось часто, т.к. еще не было полного единообразия в языке разметки гипертекста (HTML).

С течением времени, разработчики стали пользоваться общепринятыми стандартами и многие  беды остались в прошлом, но можно ли на данный момент говорить о том, что эхо войны осталось в прошлом? Попробуем разобраться.

Просматривая статистику своего сайта, я обращаю внимание, при помощи каких браузеров пользователи его просматривают. Вот тройка лидеров:

  1. Internet Explorer;
  2. Opera;
  3. Mozilla Firefox;

Я намеренно не указываю версии программ, т.к. обновления браузеров Opera и Mozilla Firefox происходят настолько часто, что за этим не успеваешь порой уследить. Что касается Internet Explorer, то на момент написания этих строк лидирует шестая версия браузера.

Как уже неоднократно отмечалось в многочисленных источниках, браузер Internet Explorer лидирует не по причине  сверх функциональных возможностей, а по причине его интеграции в операционные системы производства Microsoft. Большинство пользователей ПК этот браузер устраивает, однако многие из них о других браузерах и не слышали, а часть даже не знает, что такое "браузер". Да-да, поверьте мне наслово. Бывает спросишь у человека, каким браузером он пользуется, и после этого наступает многозначительная пауза.

Давайте посмотрим, как различные браузеры могут отображать одну и туже веб-страничку. Для примера я взял страницу реально существующего школьного сайта. В таблице ниже вы видите, как она отображается в браузерах Internet Explorer, Opera  и Mozilla Firefox.
Internet Explorer Opera Mozilla Firefox
Отображение одной и той же страницы в различных браузерах.

 

Браузеры Opera  и Mozilla Firefox отображают страницу мягко говоря иначе, чем Internet Explorer. Браузер Internet Explorer отображает все так, как задумали авторы сайта, т.е. фоновый рисунок точно вписывается в ячейку таблицы предназначенную под вертикальное меню.

Вертикальное меню без искажений

Браузер Internet Explorer отображает фоновый рисунок точно вписанный в границы ячейки таблицы.

Что касается браузеров Opera  и Mozilla Firefox, то они "почему-то" увеличили высоту ячейки таблицы, в результате чего фоновый рисунок появился еще раз, хотя и не полностью.

Повторное появление фонового рисунка в браузерах Opera и Mozilla Firefox.

 

Естественно, это испортило внешний вид страницы и воспринимается как недоработка авторов. Аргументы типа того, что страница  "оптимизирована" для просмотра в браузере Internet Explorer, в данном случае выглядят по меньшей мере несостоятельно.

Что же произошло и как исправить ситуацию? Из рисунков видно, что во втором случае увеличен интервал между строками меню, что и привело к увеличению высоты ячейки и как следствие, к повторному появлению фонового рисунка. Если заглянуть в html-код страницы, мы увидим, что при создании меню использованы теги <p>, т.е. каждый пункт меню начинается с нового абзаца. Более того, тег <p> использован без закрывающего тега </p>, что вполне допустимо. Отступ перед абзацем выставлен как 3px.

<p style="margin-left: 10px; margin-top:3px">

В описанной выше ситуации браузер Internet Explorer отразил все без искажений, а вот  браузеры Opera и Mozilla Firefox не обратили внимания на отступы перед абзацем и отобразили абзацы с отступами по умолчанию, что и привело к увеличению высоты ячейки таблицы.

[содержание]

Книжные новинки
Как сделать свой сайт и заработать на нем Е. Мухутдинов
Копилка
Рабочие программы
Проекты MS Office
Презентации
Открытые уроки
Экзаменационные билеты
Элективные курсы
Бесплатный soft
 Инструкции по ТБ
Подготовка к олимпиадам по информатике
Методика подготовки
"Золотые" алгоритмы
Простые задачи для начинающих
Олимпиадные задачи с решениями
Книги
Среда программирования
Обучение программированию на С++
Справочник по языку Pascal
Обучение
Подготовка к ЕГЭ
Создание сайтов
Уроки FrontPage
Уроки Word 2003
Создание игр на Delphi
Печатаем вслепую

Информация

Наши интервью
Книга почета
Курсы повышения квалификации
Электронная библиотечка
Книжная полка
Статьи
Полезные ссылки
Обратная связь

Конкурсы

Олимпиада
Фотоконкурс
VIP
Персональный раздел профессора
Макаровой Н.В.
Персональный раздел профессора
Смыковской Т.К.