IE6 PNG прозрачност

Харесвам това решение на Javascript, написано от David Cilley преди известно време. Той излиза от пътя на съвместимите браузъри и може да се използва с всеки бекенд, който искате. Въпреки това все още изисква празно gif изображение.

Добавете тези функции към вашия HTML Header или друг съществуващ .js, включително:

<script type="text/javascript">
    function fixPngs(){
    // Loops through all img tags   
        for (i = 0; i < document.images.length; i++){
            var s = document.images[i].src;
            if (s.indexOf('.png') > 0)  // Checks for the .png extension
                fixPng(s, document.images[i]);
        }
    }

    function fixPng(u, o){
        // u = url of the image
        // o = image object 
        o.src = 'images/spacer.gif';  // Need to give it an image so we don't get the red x
        o.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + u + "', sizingMethod='scale')";
    }   
</script>

Поставете следния условен коментар в долната част (секция на долния колонтитул, точно преди ‹/body>):

<!--[if lte IE 6]>
    <script language="javascript" type="text/javascript">
        //this is a conditional comment that only IE understands. If a user using IE 6 or lower 
         //views this page, the following code will run. Otherwise, it will appear commented out.
        //it goes after the body tag so it can fire after the page loads.
        fixPngs();
    </script> 
<![endif]-->

За по-цялостен подход към странностите на IE6 опитайте библиотеката на Javascript на IE7.

Използвайте това: http://www.twinhelix.com/css/iepngfix/

Това също е добро за IE 5.5, но не и за Mac версии на IE или по-ранна версия на IE.

Използвал съм го в доста малко сайтове и не съм имал проблеми с него.

Понякога обаче около PNG може да има грозна сива кутия, докато скриптът не започне.

Използвайте PNG Behavior.

ie6.css:

img {
   behavior: url("pngbehavior.htc");
}

page.html:

<!--[if IE 6]> 
  <link rel="stylesheet" type="text/css" href="/bgie6.css" />
<![endif]-->

Тук отивам за значката Necromancer. :)

Това не е точно поправка, а удобно решение, което използвам от време на време, за да поддържам прозрачност в IE6 без никакъв допълнителен код. Не винаги отговаря на сметката, но доста често е така.

Идеята е, че през повечето време така или иначе ще трябва да показвате вашите PNG файлове на фон с фиксиран цвят. PNG файл може да има зададен цвят на фона и IE6 ще го уважи. Това, което правите, е да получите помощната програма TweakPNG и да отворите вашия PNG файл. Там ще можете да добавите bKGD част, която определя желания цвят на фона. Просто въведете цвета, в който ще трябва да покажете PNG, и сте готови.

Една забележка - PNG файловете често включват някои стойности, за да компенсират различните устройства за показване. Може да има неща като планирани цветови пространства, цветност, гама и т.н. Те не са лоши сами по себе си, но IE някак си ги изтълкува погрешно и резултатът беше, че PNG се показаха по-тъмни, отколкото трябваше да бъдат (или може би IE беше единственият, който го е разбрал правилно? Не помня...)

Както и да е, ако искате всеки браузър да показва вашите PNG файлове еднакво, трябва да изтриете тези парчета с горепосочената помощна програма.

корекцията на twinhelix png трябва да ви помогне

Например с ie7.js на Дийн Едуардс

Имайте предвид, че трансформацията на AlphaImageLoader може да блокира IE6.

Използвайте PNG8s вместо обикновените PNG32s . Вие сте ограничени до 256 цвята и 1 бит алфа прозрачност, но побеждава произволното блокиране на браузъра.

Бихте могли да бъдете смели и просто да заявите, че вашият сайт може да не се показва добре в IE6. Може би не е най-комерсиалният подход, но бихме направили услуга на себе си (дори на Microsoft), ако просто оставим IE6 да умре. Разбира се, тъй като голяма част от онлайн дейността се случва на корпоративни машини с IE6, прикован към тях, това няма да се случи скоро. :(

1. Добавете условен css за IE6 в главния блок на вашия документ:

<!--[if (IE 6)]>
    <link rel="stylesheet" type="text/css" href="/bglocationOfyourCss/ie6.css"/>
<![endif]-->

2. Задайте име на клас във вашия елемент:

<td class = yourClassName>

3. В ie6.css приложете филтър. Трябва да посочите ширина и височина. Задайте фоново изображение на clear.cache.gif, филтърът не работи без тези свойства:

.yourClassName{
    width:8px;
    height:22px;
    background: url("locationOfBlankImage/clear.cache.gif");
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='filePath/imageName.png', sizingMethod='scale');
}

Това, което правя в проект, върху който работя, е да взема пример от HTML5 Boilerplate и присвояване на условни стилове на цялата страница. Той навлиза в него подробно тук, но накратко, идеята е да добавите условни проверки в HTML на всяка страница на вашия сайт, приложени към маркера body. Така:

<!--[if lt IE 7 ]> <body class="ie6 pageStyle"> <![endif]-->
<!--[if IE 7 ]>    <body class="ie7 pageStyle"> <![endif]-->
<!--[if IE 8 ]>    <body class="ie8 pageStyle"> <![endif]-->
<!--[if IE 9 ]>    <body class="ie9 pageStyle"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <body class="pageStyle"> <!--<![endif]-->

Браузърите на IE ще прочетат тези коментари и ще приложат тези стилове. Други браузъри ще го игнорират. Гениалността на това е, че можете да проектирате уебсайтове, съвместими със стандартите, да използвате PNG, каквото и да е. И след това във вашия CSS добавете допълнителни стилове, поставени СЛЕД вашите стандартни стилове, за да дадете на IE браузърите това, което искат. Например един стил, върху който работя, използва PNG фоново изображение. За да направя тази игра хубава в ie6, МОЖЕХ да използвам javascript/htc, за да ги заменя, да приложа един от многото хакове там. ИЛИ мога да направя това:

.someStyle {
    background: url(/images/someFile.png) no-repeat; 
background-position: -0px -280px;

}

.ie6 .someStyle {
   background: url(/images/someFile.gif) no-repeat; 
background-position: -0px -280px;

}

Подавайки GIF на моите потребители на ie6, няма процеси за заобикаляне на процесора, което всъщност е много голям проблем, ако някога сте тествали на вид POS машина, която е вероятно да работи с ie6. И не съм се отказал от качество за моите хубави потребители с хубави браузъри.

Това наистина изисква два отделни файла, но мисля, че е много по-чиста реализация от повечето. Също така, вместо отделен ie6.css файл, използването на .ie6 .whatever запазва вашите корекции точно до стиловете, към които се прилагат, което намирам за по-чисто и лесно за използване. Освен това ви насърчава да обмисляте потребителите на ie6, докато вървите, вместо да довършвате дизайна си и след това да поглеждате назад с ужас

Това е страхотна статия за този проблем. В обобщение, той предоставя JS библиотека, наречена SuperSleight. Използвал съм го в миналото с приличен успех.

Добре, на практика съм нов в html/js, но мисля, че трябваше да променя малко отговора на Роб Алън, за да коригирам два проблема:

1. AlphaImageLoader() променяше пропорциите на моите изображения, така че трябваше да възстановя оригиналните размери СЛЕД зареждането на изображенията.
2. fixPngs(), ако се извика от края на html, се извиква след зареждането на документа, но преди всички изображения да бъдат заредени.

Така че промених моя fixPngs(), за да прикача само събитие:

function fixPngs() {
  // Loops through all img tags
  for(i = 0; i < document.images.length; i++) {
    var u = document.images[i].src;
    var o = document.images[i];

    if(u.indexOf('.png') > 0) {
      o.attachEvent('onload', fixPng);
      o.src = u;
    }
  }
}

fixPngs() все още се извиква от края на html:

<!--[if lte IE 6]>
  <script language="javascript" type="text/javascript">
    // Do this after the page loads
    fixPngs();
  </script>
<![endif]-->

И fixPng() сега извлича повикващия, отделя събитието, запазва оригиналните размери, извиква AlphaImageLoader() и накрая възстановява размерите:

// u = url of the image
// o = image object
function fixPng(e) {
  var caller = e.target            ||
               e.srcElement        ||
               window.event.target ||
               window.event.srcElement;
  var u = caller.src;
  var o = caller;

  if(!o || !u)
    return;

  // Detach event so is not triggered by the AlphaImageLoader
  o.detachEvent('onload', fixPng);

  // Save original sizes
  var oldw = o.clientWidth;
  var oldh = o.clientHeight;

  // Need to give it an image so we don't get the red x
  o.src          = 'images/spacer.gif';
  o.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+ u +"', sizingMethod='scale')";

  // Restore original sizes
  if(o.style) {
    o.style.width  = oldw +"px";
    o.style.height = oldh +"px";
  }
}

Дали съм го преубил?