Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > Вёрстка веб-сайтов > Проблема с png в IE


Автор: Гость_Slava 28.12.2005, 13:53
Проблема в следующем:

Сохраняю прозрачный png-24 в Photoshop CS. Прекрасно отображается в Opera, FF, а в IE получается серый фон на картинке.

Как это исправить? Что делать?

Автор: z-END 28.12.2005, 14:02
Цитата
Как это исправить? Что делать?

насколько до меня доходили слухи что в IE7 общеались включить поддержку альфа-канала, в более ранних версиях ее точно нет..
отсюда выход один - сохранять в png-8

Автор: R.M. 28.12.2005, 14:25
z-END
Цитата(z @ 28.12.2005, 15:02)
отсюда выход один - сохранять в png-8

Ты неправ smile

У Артемия Лебедева есть выход, я его переделал, выход такой

Создать файл pngfix.htc
Код

<public:component>
    <script language="JavaScript">
        element.runtimeStyle.filter = 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src="' + style.backgroundImage.substr( 4, style.backgroundImage.length - 5 ) + '", sizingMethod="crop")'
        element.className += ''
    </script>
</public:component>


Создать однопиксельный *.gif

Создать ещё один документ, например pnginie.html
Код

<style type="text/css">
.png { //background-image: none ! important; behavior: url('pngfix.htc');}
</style>
<img src=1x1.gif style="background-image: url('logo.png');" class="png" width="175" height="135">


Вот и всё smile

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

Автор: Ciber SLasH 28.12.2005, 15:18
2Куксикус:
Спасибо за пример, я его уже видел (ты уже здесь его публиковал), но он у менятогда не заработал и просто проигнорировал. А теперь всё заработало...
Лови флюс...

Автор: Guest 28.12.2005, 15:41
Куксикус
Спасибо, работает, но в IE картинка отображается как-бы утопленной (с рамкой). Пробовал прописать border: 0px - не помагает. Как убрать?

Автор: dm9 28.12.2005, 16:04
Вот ещё решение. Тестировали, работает много где... на Сафари даже. Под ИЕ5 не работало - но это глюк абс. позиционирования.
http://www.dm9.ru/vingrad/examples/html/transparentimage/

Автор: Гость_Slava 28.12.2005, 16:43
так как убрать "утопленность" с картинок?

Автор: dm9 28.12.2005, 16:54
Slava, попробуй так: http://www.dm9.ru/vingrad/examples/html/transparentimage/
smile

Автор: Ciber SLasH 28.12.2005, 20:55
Цитата
так как убрать "утопленность" с картинок?

Говорилось же, что нужно сделать однопиксельный прозрачный GIF и прописать его в src у IMG.
Добавлено @ 22:10
Оказалось, что можно без всяких HTC делать:
Код
<style type='text/css'>
.pngA {
    width: 256px;
    height: 215px;
    background-image: url("logo.png");
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="logo.png");
    background-image: "none";
}
</style>
<div class='pngA'></div>

filter нужен для IE, background-image нужен для остальных браузеров.

Автор: set36 17.4.2006, 20:49
Цитата
так как убрать "утопленность" с картинок?


Надо писать фильтр[как и в .htc] без 
Код
, sizingMethod="crop"


Я у себя год назад переделал и катинки не сжимаются Ж)))

Господи, так извращаться... на webfx есть полностью готовый htc-шник, который подключается ко всем <img>, смотрит какое расширение файла, выдерает src подставляет его в фильтр, подставляет в src прозрачный гиф.
Всё по автоматике., только убираем сайзингМетод и уже не надо прописывать всем размер.

.htc-файл кешируется намертво[учтите это при отладке] и весит 2кБ, у пользователей траффика не отнимет.
 

Автор: R.M. 18.4.2006, 10:42
set36, и где же он? 

Автор: set36 19.4.2006, 18:37
http://webfx.eae.net/dhtml/pngbehavior/pngbehavior.html
код файла и подключение ниже smile 
и пишем без 
Код
, sizingMethod="scale"

этого. 

Автор: R.M. 20.4.2006, 09:52
Цитата

Сервер не найден
 

Автор: Ciber SLasH 20.4.2006, 10:32
У меня находит сервер.
Вот то, что там было... 

Автор: R.M. 20.4.2006, 11:37
set36, 
Работает. Если от этого решится "Нестыковка behavior и .htaccess" То + тебе поставлю 100%

Ciber SLasH, спасибо большое 

Автор: set36 20.4.2006, 12:35
Бе... какая может быть нестыковка?
Знаю только, что для HTC надо прописывать MIME-type application/x-component или text/x-component
... есть предположение, что, если ставишь .htaccess на папку, то к файлам неизвестного серверу типа приатачивается заголовок что это типо поток информации неизвестного типа, и браузер перестаёт их обрабатывать.
Вывод один прописать в .htaccess MIME-type для HTC application/x-component...
или поговорить с хостером, чтоб добавил в МИМ-типы сервера для всех напрямую. smile 

Исчо советую подключать не через внешний CSS'ник, а писать стили в теле документа.
Пример из моего индекса:
Код

<!--[if IE]><style type="text/css">body {behavior:url(/blocks/menu/fixmenu.htc);} img {behavior:url(/blocks/menu/iepng.htc);}</style><![endif]-->


 smile :
Если бы мы могли подключать HTC через <link> то можно было бы указывать сразу тип содержимого, без прописей в настройки сервера. 

Автор: R.M. 20.4.2006, 12:55
Цитата(set36 @  20.4.2006,  13:35 Найти цитируемый пост)
Бе... какая может быть нестыковка?


http://forum.vingrad.ru/index.php?showtopic=90988 

Автор: set36 21.4.2006, 01:25
Укажи, чтоб обрабатывало modRewrite'ом только страничные файлы, пхп хтм хтмл Ххтмл ... думаю асп под апачем не катица...

Только ты не думай, что я уворачиваюсь от ответа,- htc не любит противоестественных вмешательств и паранормальных эфектов, - 
защита в ИЕ чтоб у тебя куки не выдрали. 

Автор: R.M. 21.4.2006, 10:39
set36, только php 

Автор: set36 21.4.2006, 14:25
Тогда попробуй так:

htaccess
Код

<Files *.php>
RewriteRule hol/([a-zA-Z]+)/id/([0-9]+) index.php?hol=$1&id=$2
</Files>


 

Автор: R.M. 22.4.2006, 12:17
set36, при 
Код
<Files *.php>
RewriteRule hol/([a-zA-Z]+)/id/([0-9]+) index.php?hol=$1&id=$2
</Files>


пишет Not Found т.е. ненаходит страницу. Может както можно запретить только для .htc файлов?

behavior не срабатывает т.е. в картинке голубой фон 

Автор: set36 22.4.2006, 14:28
А это уже документация по апачу.

в htaccess'ах я ничего не знаю :=))))
Все проблемы касающиеся "png ie" здесь решены. 

Автор: Secandr 23.4.2006, 22:17
Тоолько что искал решение, нашёл вот это:
Код

<!--[if gte IE 5.5]><![if lt IE 7]><style type="text/css">
#alImg1 img, #alImg2 img { filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0); }
#alImg1, #alImg2 { display: inline-block; }
#alImg1 { filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='test.png'); }
#alImg2 { filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/face2_2.png'); 
}</style><![endif]><![endif]-->
<span id="alImg2" style="width:270px;height:345px;">
<img height="345" alt="face2.gif" src="/images/face2_2.png" width="270" />
</span>
 

Автор: R.M. 24.4.2006, 10:45
Secandr, попробую. Заранее спасибо 

Автор: KOp4iK 26.7.2007, 15:37
И всётаки хоцца разобраться с первым примером... smile 

зашол на http://www.artlebedev.ru/tools/technogrette/html/png_in_ie/... прочитал статейку... всё понял smile ... скачал в c:/aaa/ все файлики... открыл test.html и фиг вам(последняя картинка не красивая :( )  smile  smile  smile... поможите плз!!! Где я неправ??? целый день бьюсю  smile 

ЗЫ MSIE 7

Автор: SelenIT 26.7.2007, 17:29
KOp4iK, у меня Ваш пример нормально рисуется и в IE6, и в IE7 standalone. Но вообще пример с сайта Лебедева создавался, когда IE7 еще даже не ожидался, а так он нормально поддерживает полупрозрачность PNG сам по себе. Так что можно подключать добавку (класс .png) для IE6- c помощью условных комментов...

Автор: KOp4iK 30.7.2007, 11:44
хм странно... просто открываясь из дирректории не хотело работать а зайдя на себя по IP всё отработало...  smile 

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)