Не буду первооткрывателем или человеком, впервые озвучившим вслух эту мысль, но про IE6 уже давно пора забыть.

Да, уже были попытки отказаться от него на хабре и на других западных блогах, слегка поддерживаемые веб-разработчиками, но как и любое новомодное попсовое движение, эти попытки тихо и мирно загнулись.

Проблемы, одни проблемы...

Каждый из веб-разработчиков хоть раз, но сталкивался со сложностями при тестировании своих проектов в IE6. Не особо заморачиваясь, навскидку, могу привести неполный список проблем:

1. нет поддержки min-width, max-width, min-height, max-height;
2. нет поддержки формата PNG для изображений;
3. проблемы с блочной моделью CSS;
4. не масштабируются шрифты, указанные в пикселях;
5. жутко тормозящий редеринг страниц при работе с DOM через JavaScript (анимация);
6. неприручаемый элемент select;
7. множественные CSS-баги;
8. и многое другое (список можно дополнить в зависимости от опыта работы и желания).

Реинкарнация известного принципа «20/80» по отношению к HTML/CSS-верстке выглядит так: 20% рабочего времени верстаем макет, 80% времени заставляем его нормально отображаться в IE6.

Причины поражений

Теперь вернёмся к тому, что попытки отказаться от IE6 уже были, но провалились. Почему?

Самая главная причина — никто не позаботился о пользователе, не объяснил ему, что он выиграет отказавшись от устаревшего браузера. Не было ни одно толковой статьи, в которой рассказали бы пользователю преимущества новых, поддерживающих стандарты браузеров (табы, встроенные RSS-ридеры, скорость работы, быстрые и расширенные настройки, безопасность, возможность использовать плагины и другое).

Нет. Все были заняты самолюбованием и осознанием гордости от того, что участвуют в новом модном движении. Поэтому проигрывали и проигрывают до сих пор.

Один мой друг, далёкий от веб-разработки и прочих премудростей, пользователь Интернет среднего профиля, долгое время предпочитал использовать в качестве основного поисковика ya.ru и браузер IE6. Знаете почему? Потому, что результаты поиска (ссылки) удобно открываются в новом окне! Сечас он использует Opera + google.com и счастлив, только мне сначала пришлось провести небольшую разъяснительную работу.

Трудно представить, что человек не знал про существование вкладок в браузерах и понятия не имел обосновных возможностях поисковых сервисов.

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

Уход IE6 в историю, позволит разработчикам использовать на полную мощь CSS 2.1 (с опозданием в 10 лет всё из-за того же эксплорера), экономить своё время и деньги заказчика (при условии что оплата почасовая).

Даже сама Microsoft на странице, посвященной IE6, первым делом предлагает скачать IE7.

Ну и конечно же статистика по браузерам на октябрь 2008 от liveinternet.ru (кликабельно):

Без наглядной статистики, невозможно представить текущее положение вещей.

Оружие бунта

Осознание проблемы — это уже половина успеха. Второй будут мелкие шаги к достижению цели. Нельзя сказать, что завтра мы проснемся и никакого IE6 уже не будет существовать. Будет. Но только в гораздо малой доле браузеров чем сейчас, и мы сами можем на это повлиять.

Спокойный метод

Как уже было написано выше, нужно просто объяснить своим посетителям, чем им это выгодно. Для этого можно написать пост или, если лень, поставить ссылку на то, что уже написано другими.

Ну и не помешает ссылка (картинка) на скачивание вашего любимого браузера где-нибудь в сайдбаре. Например такая как здесь.

Спокойный метод (модифицированный)

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

<!--[if lte IE 6]>
	...ваш код...
<![endif]-->

Радикальный метод

Блокировать доступ к сайту для пользователей IE6. Вместо сайта, они увидят всплывающее окно с предложением скачать более современный браузер.

Скрипт и рабочий пример для такого метода можете найти на css-tricks.com.

Не знаю, правильный это метод или нет, но он тоже имеет право на существование. Возможно, он будет самым результативным. Хочешь получать интересную информацию — используй современный браузер.

Тихое присутствие

Наверное, все эти методы, описанные выше, годятся для использования владельцами сайтов и блогов. Что же с клиентскими разработками?

А для клиентов, дизайнеры и верстальщики могут предусмотреть небольшую кнопку или ссылку на скачивание Opera (Moziila, Safari, Chrome, что-хотите...) где-нибудь в футере сайта, рядом с кнопками валидации.

По себе знаю, многие заказчики относятся с пониманием и не запрещают делать такие штуки.

Движение

Предлагаю каждому начать свой протест с того метода, который ему ближе. Я начну с кнопки с предложением скачать Mozilla Firefox 3 в допобласти и этой ссылки на расширения к нему.

Понимаю, что это не совсем актуально для блога интернет-тематики, где пользователи в этой теме продвинутые. Но каждый из нас занимается созданием сайтов, блогов, помощью людям в сайтостроении и так далее. Поэтому скоро такие кнопки/ссылки могут появиться и на сайтах домохозяек, автомобилистов, городских порталах, форумах и везде где можно приложить руку толкового вебмастера. Цепная реакция...

Ссылки по теме:

• No More MSIE (en)
• killbillsrowser.com (en)
• killie6.com (en)
• noie.ru/blog/ (ru)
• stopie.org.ru (ru)

Постовой:

Подборка тем для WordPress для блоггеров. Blogun vs J2J. Преимущества и недостатки.

Мой твиттер, в котором я делюсь полезными ссылками и мыслями — twitter.com/irotor.

Нет похожих статей.

Не знаю, поможет ли кому-нибудь в работе, или просто возьмёте на заметку. Заметил, что браузеры по-разному обрабатывают CSS-свойством text-transform слова написанные через дефис.

Ниже приведу парочку скриншотов в доказательство.

Так выглядит преобразование text-transform в:

IE6, IE7, IE8 Beta 2, Safari 3, Google Chrome Beta.

Ну а так, в некоторых других:

Mozilla Firefox 2, 3, Opera 9.

Интересно, какой из вариантов отображения правильный?

* * *

Продолжается акция «Давайте знакомиться!». Напомню, что у вас есть шанс получить ссылку на свой блог и засветиться в моём RSS-ридере.

Постовой с участниками акции:

Псевдо-класс :not () в CSS3. Что такое семантика в верстке. Кроссбраузерный вариант выравнивания div всегда по центру окна браузера.

* * *

Мой твиттер, в котором я делюсь полезными ссылками и мыслями — twitter.com/irotor.

Похожие статьи:

1. Акция «Давайте знакомиться!»
2. Итоги акции «Давайте знакомиться!»
3. Скрытые возможности text-shadow

Уже долгое время на сайтах популярны различные вебдванольные стикеры, которые «клеятся на макет сверху», часто с помощью абсолютного позиционирования. При вёрстке, такие изображения лучше сохранять в формат PNG, чтобы оставить все тени и полупрозрачности, как на исходном макете. Да и GIF формат, часто не подходит из-за зазубренных краёв и отсутствия в нём полупрозрачности.

И конечно же, все мы знаем, что в IE6 есть проблема с отображением PNG — изображение появляется на сером фоне вместо прозрачного. Чтобы оно отображалось правильно, нужно применить фильтр AlphaImageLoader. Но не все знают, что если такое изображение поместить внутрь ссылки, она начинает работать «неправильно».

Проблема

Вместо долгих объяснений покажу на примере (открывать в IE6, под другие браузеры не заточен!).

Ничего странного не заметили?

Для тех кто не рассмотрел, показываю, как сейчас работает ссылка и как выглядит наведённый на неё курсор:

Тоесть ссылка как бы «инвертируется»: прозрачные пиксели становятся кликабельными, а непрозрачные — нет. Причём, неважно, как вставлено изображение, картинкой или фоном.

Код из примера (XHTML):

<h2>Стикер вставлен фоном</h2>
<div id="one" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='sticker.png', sizingMethod='scale');">
	<a href="#"></a>
</div>
<h2>Стикер вставлен картинкой</h2>
<div id="two" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='sticker.png');">
	<a href="#"><img src="sticker.png" width="155" height="158" style="filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);" alt="sticker" /></a>
</div>

В стилях просто прописываются ширина и высота блоков, а также ссылке в примере с фоном указываются блочные свойства (CSS):

body {
	text-align: center;
	background: #fff;
	font: normal 85%/1.5em tahoma, verdana, sans-serif;
}
img {
	vertical-align: top;
	border: none;
}
div {
	display: block;
	width: 155px;
	height: 158px;
	margin: 0 auto 20px auto;
}
#one a {
	display: block;
	width: 155px;
	height: 158px;
}

Простое указание через CSS cursor: pointer, чтобы исправить ситуацию, не работает.

Как победить

Решение необъяснимое, но оно работает. Подсмотрел в каком-то из западных блогов, но не помню ссылку, тут уж извините.

Чтобы исправить положение, для элементов, содержащих PNG-изображение (или к которым применён фильтр AlphaImageLoader) нужно присвоить CSS-стиль position: static, а всем дочерним элементам по отношению к нему (в моём примере это ссылки) — position: relative.

Вот «исправленный» пример (XHTML):

<h2>Стикер вставлен фоном</h2>
<div id="one" style="position: static; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='sticker.png', sizingMethod='scale');">
	<a href="#" style="position: relative"></a>
</div>
<h2>Стикер вставлен картинкой</h2>
<div id="two" style="position: static; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='sticker.png');">
	<a href="#" style="position: relative"><img src="sticker.png" width="155" height="158" style="position: relative; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);" alt="sticker" /></a>
</div>

Ну и страничка с примером.

Для наглядности, я писал стили в XHTML-коде, естественно их лучше вынести в отдельный стилевой лист.

Этот пример и описание проблемы я привёл для того, чтобы вы знали, с чем имеете дело, если встретитесь с этим багом. Есть путь проще для решения этой проблемы, но там используется JavaScript.

Светлый путь

Чтобы не заморачиваться написанием стилей для кроссбраузерности (а для примера выше придётся писать стили отдельно для IE6 и отдельно для «нормальных» браузеров), рекомендую использовать скрипт iepngfix. Как его подключать подробно написано здесь.

Этот скрипт сам исправит вид всех PNG-изображений на странице в IE6, достаточно только будет перечислить их в стилевом листе.

* * *

Сканер блогов:

Интересные онлайн генераторы для подбора цветовой палитры. Когда можно обойтись без !important в CSS?. 17 популярных JS/AJAX эффектов для сайта. Ну а для любителей исторических мест Беларуси — виртуальная прогулка из Гродно в Минск.

Мой твиттер, в котором я делюсь полезными ссылками и мыслями — twitter.com/irotor.

Похожие статьи:

1. Боремся с двойным отступом в IE6 при использовании float

Собственно еще один баг в IE, о котором я успешно забыл, но он, красавец, недавно сам о себе напомнил.

Проявляется он довольно просто — после верстки, на выходе, мы получаем непонятные отступы под изображениями, которые ломают дизайн на странице, да и выглядят как-то не очень приятно.

Проблемка

Продемонстрирую суть на рисунке:

Теперь HTML-код:

<div class="image_box">
	<img src="картинка.jpg" width="200" height="200" alt="Красивая картинка" />
</div>

CSS:

.image_box {
	width: 200px;
	height: 200px;
	border: 3px solid black;
}

Кстати, IE очень последовательный браузер, даже в своих багах, поэтому и в табличной верстке наблюдаются те же проблемы (HTML):

<table id="bug_table">
	<tr>
		<td class="image_box">
			<img src="картинка.jpg" width="200" height="200" alt="Красивая картинка" />
		</td>
	</tr>
</table>

Табличку привожу просто для примера, поэтому она такая слабенькая.

И к ней CSS:

#bug_table {
	border-collpase: collapse;
	border: none;
}
.image_box {
	width: 200px;
	height: 200px;
	border: 3px solid black;
}

По идее, в обоих случаях, мы должны были получить просто рамку толщиной в 3 px вокруг изображения и ничего больше. Но в результате, в первом и во втором варианте, наблюдается непонятный отступ под изображениями. В свое время это была проблема 6-ой версии браузера, но, к своему удивлению, я обнаружил ее и в 7-ой (оказалось баги по наследству передаются).

Лекарство от головной боли

Решение странное, но работает. Нужно удалить из HTML-кода все пробелы, отступы и переносы строк, т.е. превратить его вот в это для первого случая:

<div class="image_box"><img src="картинка.jpg" width="200" height="200" alt="Красивая картинка" /></div>

И вот в это для второго:

<table id="bug_table"><tr><td class="image_box"><img src="картинка.jpg" width="200" height="200" alt="Красивая картинка" /></td></tr></table>

После такого исправления лишние отступы исчезнут и мы получим ожидаемый результат.

Страничка с рабочим примером тут. Смотреть, естественно, в обоих Эксплорерах.

Кстати, проблема может проявить себя не только с изображениями. У меня были такие отступы, когда я встраивал в div и таблицу, и неупорядоченный список — под ними также были лишние просветы. Поэтому будьте внимательны.

Нашелся способ получше!

Спасибо Octane, за толковый совет. Теперь ясна природа явления и лучший способ решения проблемы. Читайте комментарии!

Ради интереса, зарегистрировался на blogowar.ru, теперь можете следить и там за моими успехами.

Сканер блогов (ищем умные мысли):

Настя Манно размышляет о «О бесплатности «бесплатных» тем для WP». В БлогДозоре несколько интересных ссылок на SEO-блоги. Ну а для любителей поиграть во Flash на работе — прикольная игра про робота-телепорта на блоге urbanian.ru.

Мой твиттер, в котором я делюсь полезными ссылками и мыслями — twitter.com/irotor.

Нет похожих статей.

Этим постом хочу начать раскрытие одной важной темы — различных багов в браузерах и методов борьбы с ними. В основном, конечно же, это касается CSS-верстки и написания js-скриптов. По опыту знаю, что каждая такая проблема способна измотать нервы не на один день, затянуть сдачу проекта и вызвать недовольство клиента.

Итак проблема

При использованиии двух вложенных элементов блочного уровня, к которым применены CSS-свойства float и margin, IE6 увеличивает значение отступов (только горизонтальных) в два раза, т. е. если применить к такому блоку например margin-left: 50px, то в шестом эксплорере мы получим отступ ровно в 100px, а не в 50px как во всех нормальных браузерах.

Как победить

Можно конечно использовать совет под номером 3 от Никиты Селецкого, но я предпочитаю другой способ. Обычно хватает просто добавить к блоку свойство display:inline, которое заставляет IE6 нормально отобразить отступ и успешно игнорируется остальными браузерами. При этом <div>...</div> сохраняет свойства объекта блочного уровня.

Если не верите, можете посмотреть рабочий пример.

Противопоказания

Не замечены. CSS проходит валидацию.

* * *

Постовой:

Обучение SEO, поисковая оптимизация в Минске. Помощь в решении задач по тепломассообмену.

* * *

Мой твиттер, в котором я делюсь полезными ссылками и мыслями — twitter.com/irotor.

Похожие статьи:

1. Баг с PNG-прозрачностью в IE6, но не тот, о котором вы подумали
2. Лишние отступы под изображениями в IE6,7
3. Кроссбраузерное выравнивание кнопок-изображений в формах