Вконтакте
Телефон для заказов: +7 (910) 487 81 94
Подписка на RSS

Прозрачность png в древних версиях Internet Explorer

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

Одной из тем, в которых это чудовище не разбирается, является прозрачность изображений формата .png. Сегодня я поделюсь с вами способом, который использую для того, чтобы заставить Internet Explorer правильно интерпретировать подобные картинки.

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

Для того, чтобы решить проблему с прозрачностью в IE, нужно всего лишь загрузить на сервер прозрачную однопиксельную картинку clear.gif и файл iepngfix.htc, в котором для несчастного браузера написана инструкция по тому, как встать в нужную позу и сделать то, что от него требуется.

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

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

Добавим всё это в HTML, у меня получилось так:

<div class="container">

<h1 class="iepngfix">Привет!</h1>
</div>

В CSS я добавил следующие стили:

* html .iepngfix { behavior: url(iepngfix.htc); }

.container {
	width:175px;
	height:244px;
	position: relative;
	
}

.container h1 {
	position:absolute;
	top:10px;
	display:block;
	left:10px;
	background-image:url(fon.png);
	padding-top:10px;
	padding-bottom:10px;
	text-align:center;
	width:155px;
	color:#B04533;
	margin:0;
	background-repeat:no-repeat;
	line-height:30px;
}

Класс iepngfix как раз и подгружает тот самый файл, который заставляет IE думать как надо.

В результате у нас получился вот такой контейнер:

Для того, чтобы посмотреть подробнее что и как сделано, предлагаю скачать архив с тестовой страницей и с необходимыми файлами.

Вот, в принципе, и всё. Надеюсь, у вас всё получится.

К сожалению, у данного метода есть минус: не работают свойства backgorund-repeat и background-position. Находил в интернете возможное решение этой проблемы, но, увы, у меня оно не сработало. Если поделитесь рабочим вариантом — буду признателен.

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

Желаю вам всего самого доброго.
Seogad

P.S. Записал аудио вчерашнего стихотворения, скоро оно будет опубликовано =)

Понравилась статья?

Создание блога под ключ всего за 999 рублей!

«Прозрачность png в древних версиях Internet Explorer» — комментарии (2)

  • И долго еще люди будут смотреть в древние эксплореры?? жесть 21 век на дворе

  • @Сумасшедший Джо, ну я уже на некоторых проектах забиваю на древние версии ie — если вечно их подерживать, вечно ими и пользоваться будут…

Ваш комментарий

Поля отмеченные * нужно в любом случае заполнить. Пожалуйста, воспринимайте буквально текст «Блог или профиль в соц. сети», не оставляйте ссылки на интернет-магазины, коммерческие сайты и страницы, на которых нельзя познакомиться с вами и вашей деятельностью - такое творчество будет удалено. Это dofollow блог.