IE8 и поддержка стандартов — transparent PNG + opacity, а также data:URI + AlphaImageLoader

    Наковырял пару проблем работы браузера IE8. Может кому пригодится.

    Прозрачный PNG + filter:alpha(opacity)



    .class{
    background:url(transparent.png);
    filter:alpha(opacity=50);
    }

    результат — прозрачные пиксели становятся черными

    Лекарство


    нужно применить мульти-фильтр

    .class{
    background:none;
    filter:alpha(opacity=50) progid:DXImageTransform.Microsoft.AlphaImageLoader(src=transparent.png, sizingMethod='crop');
    }


    Следующая проблема нашлась благодаря предыдущей

    data:URI + AlphaImageLoader


    .class{
    background:none;
    filter:alpha(opacity=50) progid:DXImageTransform.Microsoft.AlphaImageLoader(src='data:image/png;base64,iVBORw...', sizingMethod='crop');
    }

    Приведенный код не «фурычит».

    Similar posts

    Ads
    AdBlock has stolen the banner, but banners are not teeth — they will be back

    More

    Comments 61

      +24
      Ох, когда ж оно будет работать-то нормально! Одному мне кажется, что у MS и АвтоВАЗа есть что-то общее?
        +25
        если бы АвтоВАЗ работал как Microsoft, на приорах и калинах ездили бы во всём мире ;)
        а другие машины только для гиков или «гламурян»
        …и такие темы на авто-форумах: Глючный АвтоВАЗ! Когда пофиксят косяк прозрачности лобового стекла?
        а в европе законодательно запретят на вазах предустанавливать запаску и радио ))
        • UFO just landed and posted this here
            0
            И не говорите! Была свята надежда, что DXImageTransform для элементарных вещей мы больше не увидим. Получили хрен с маслом. Достали они уже, честно говоря.
            +1
            У мну с ним тоже проблемы, делаю картинку цвета #f07000 и такого же цвета background, во всех браузерах всё нормально, а в ie8 (в младших ie не посмотрел) цвет картинки получается чуть темнее, чем цвет фона, т.е. цвета отличаются, хотя должны совпадать.
            Может кто знает почему?
              +1
              В принципе могут различаться сами цветовые палитры в графическом редакторе и браузере. Но обычно глазом такие различия не заметить.
                0
                надо вырезать из картинки цветовой профиль
                  0
                  Как это?
                  0
                  Согласен, кроме того слышал что проблема с яркостью в ИЕ вызвана в фотошопе версий ниже cs4. В последней таких проблем не было замечено.
                    +1
                    Я имею в виду яркость картинок.
                      +1
                      Прошу прощения, ниже Сергей Чикуенок уже ответил, начиная с CS3 такой проблемы нету.
                        +2
                        Новый контр-страйк?
                    +2
                    Фотошоп добавляет в png-файлы chunk с названием gAMA.
                    Чтобы во всех браузерах цвета были одинаковыми, надо удалить этот chunk.
                    Я пользуюсь для этого программой TweakPNG (http://entropymine.com/jason/tweakpng/).
                      +4
                      Начиная с версии CS3 не добавляет
                        0
                        Подтверждаю.
                          +1
                          Ну, значит в новом Фотошопе таких проблем с цветами в Экслорере уже не должно быть. :)
                          Или даже без gAMA цвета искажаются?
                            +1
                            нет, без gAMA не искажаются, но прогнав через утилиту можно просто размер уменьшить за счет более тщательного сжатия.
                              +1
                              pngout и OptiPNG в разных вариантах дают хороший выигрыш в размере результирующего png-файла. Может кому пригодится инфа.
                                0
                                интересно, может и пригодится
                          0
                          Зато начиная с CS4 по умолчанию любит добавить в каждый сохраняемый файл 50 КБ XML-копирайтов. Особенно впечатляет, когда полезных данных как таковых в файле 300 байт. %)
                          0
                          gimp по умолчанию не добавляет =)
                            0
                            да, я тоже гимпом люблю пользоваться, чтобы не добавлялись всякие левые чанки, но он не все psd-макеты читает корректно.
                        +3
                        Я так надеялся, что хоть в этот раз MS не лохонутся и выпустят качественный браузер. А они как всегда подкинули нам «приятных сюрпризов».
                          0
                          Везёт. Зная их у меня и надежды небыло на это…
                          0
                          Мульти-фильтр это конечно хорошо, но как в этом случае реализовать background-position?
                            +3
                            а при чём тут восьмёрка? о0 это давно так…
                              +1
                              да, проблемы с прозрачностью в ИЕ давно, и в восьмерке безобразие продолжается. кто-то кричал о поддержке стандартов… и я надеялся… обломался. А вот относительно data:URI поддержка появилась с 8ой версии, но как видим не во всех случаях.
                                +4
                                «Кричали» о полной поддержке CSS 2.1. Прозрачность туда, к сожалению, не входит
                                  +2
                                  IE8 поддерживает стандарты w3.org
                                  data:URI в фильтрах IE к стандартам не относится :)
                                0
                                а случаем compatibility mode не включен? т.е. это точно восьмерка так отрабатывает или ее эмуляция 7ки?
                                  0
                                  Точно.
                                    0
                                    проверял и так и сяк — одинаково
                                  • UFO just landed and posted this here
                                    • UFO just landed and posted this here
                                        –3
                                        пусть народ знает проблемы. а маты это нехорошо.
                                        • UFO just landed and posted this here
                                            +4
                                            И это, на самом деле хорошо, потому что проблемам с ИЕ7 и ИЕ6 можно посвятить целый блог :)
                                        –1
                                        С фильтрами в IE опасно) Сами мсы на форуме говорят, что есть мемори лик…
                                          +1
                                          Раздосадован. В целом, конечно браузер лучше своих предшественников, однако, проблемы, как видно, остаются. С другой стороны, они несколько экзотичны-ещё не все играются с прозрачностью и поняли, как удобны бывают data:URI. Вот через годик количество жалоб должно сильно усилиться, потому что тренд будет подхвачен и получит более широкое распространение, как и все инновации со временем.
                                            0
                                            А в каком режиме IE8? Совместимости или в режиме движка IE8?
                                              0
                                              я выше писал что проверял в разных режимах
                                            0
                                            я бы вообще старался не фиксить прозрачность, сайт из за этого не развалится, будет выглядеть чуть «некрасивше» чем в нормальных браузерах и пользователь задумается о переходе на более качественный браузер.
                                              0
                                              это только, если он увидит, как оно в других браузерах выглядит. что вряд ли =)
                                                0
                                                Ну еще как вариант — если размер изображения окажется не критичным, то можно и png-шку полупрозрачной сделать :)
                                                  0
                                                  да можно, сделать вторую картинку полупрозрачную, но зачем? если другие браузеры норм-но справляются
                                                –1
                                                автор топика не удосужится напомнить, какую версию css полностью поддерживает IE8 и в какой версии css появляется opacity?
                                                  0
                                                  IE8 с нормальным DOCTYPE поддерживает PNG transparent.
                                                    +1
                                                    зато не поддерживает PNG transparent + opacity
                                                    0
                                                    с 8-й версии в IE принято писать
                                                    -ms-filter: «alpha(opacity=50) progid:DXImageTransform.Microsoft.AlphaImageLoader(src=transparent.png, sizingMethod='crop');»
                                                    и вообще все нестандартные свойства IE нужно использовать с приставкой -ms-
                                                      0
                                                      Видимо автор использует IE8 в режиме совместимости.
                                                        0
                                                        И будущее css будет таким?
                                                        -moz
                                                        -ms
                                                        -oper
                                                        -saf
                                                          +2
                                                          Это давно уже настоящие. Последние два:
                                                          -o-
                                                          -webkit-
                                                            +1
                                                            Это стандарт W3C: браузер может реализовывать нестандартные (или ещё не принятые) свойства, начиная их с собственного префикса, который должен выглядеть как -код-свойство.

                                                            У разных браузеров они разные:

                                                            -ms- — IE
                                                            -o- — Opera
                                                            -moz- — Mozilla (+FF)
                                                            -webkit- — Safari (и всё, что на WebKit)

                                                            Удивлён, что вы не сталкивались в такими свойствами. И, повторюсь, это закреплённое стандартом поведение.
                                                          0
                                                          Опять фильры :...(

                                                          Only users with full accounts can post comments. Log in, please.