IE6 PNG прозрачность - PullRequest
Новая
       61

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

24 голосов
/ 30 марта 2009

Как я могу исправить ошибку прозрачности PNG в IE6 для фонового изображения?

Ответы [ 12 ]

20 голосов
/ 30 марта 2009

Мне нравится это решение Javascript, написанное David Cilley некоторое время назад. Он исключает совместимость браузеров и может использоваться с любым бэкэндом, который вы хотите. Это все еще требует пустое изображение GIF, хотя.

Добавьте эти функции в ваш HTML-заголовок или в другие существующие .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>

Поместите следующий условный комментарий внизу (раздел нижнего колонтитула, непосредственно перед ): 

<!--[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 попробуйте IE7 Javascript library .

8 голосов
/ 30 марта 2009

Использование PNG Поведение .

ie6.css: 

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

page.html: 

<!--[if IE 6]> 
  <link rel="stylesheet" type="text/css" href="ie6.css" />
<![endif]-->
8 голосов
/ 30 марта 2009

Используйте это: http://www.twinhelix.com/css/iepngfix/

Это также хорошо для IE 5.5, но не для Mac версий IE или более ранней версии IE.

Я использовал его на довольно немногих сайтах, и у меня не было проблем с ним.

Иногда вокруг PNG может быть уродливая серая рамка, пока сценарий не сработает.

3 голосов
/ 14 декабря 2009

Я собираюсь получить значок Некроманта здесь. :)

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

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

Одно примечание - файлы PNG часто содержат некоторые значения для компенсации различных устройств отображения. Могут быть такие вещи, как предполагаемые цветовые пространства, цветность, гамма и т. Д. Они сами по себе неплохие, но IE как-то их неправильно истолковал, и в результате PNG оказались темнее, чем должны были (или, возможно, IE единственный, кто понял это правильно? Я не помню ...)

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

2 голосов
/ 15 декабря 2010

То, что я делаю в проекте, над которым я работаю, берет пример с 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 .whith, что держит ваши исправления прямо рядом со стилями, к которым они применяются, которые я считаю чище и проще в использовании. Это также побуждает вас думать о пользователях ie6 по ходу дела, вместо того, чтобы закончить свой дизайн, а затем оглянуться назад в ужасе

2 голосов
/ 17 марта 2010

1.Добавьте условный CSS для IE6 внутри блока head вашего документа: 

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

2. Назначьте имя класса в вашем элементе: 

<code>
<td class = yourClassName>

3. В ie6.css примените фильтр. Вы должны указать ширину и высоту. Установите фоновое изображение в clear.cache.gif, фильтр не будет работать без этих свойств: 

<code>
.yourClassName{
    width:8px;
    height:22px;
    background: url("locationOfBlankImage/clear.cache.gif");
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='filePath/imageName.png', sizingMethod='scale');
}
2 голосов
/ 03 апреля 2009

Помните, что преобразование AlphaImageLoader может тупик IE6 .

Используйте PNG8s вместо обычных PNG32. Вы ограничены 256 цветами и 1 битом альфа-прозрачности, но это лучше, чем случайная блокировка браузера.

2 голосов
/ 30 марта 2009

Вы можете быть смелым и просто заявить, что ваш сайт может плохо отображаться в IE6. Возможно, не самый коммерчески мыслящий подход, но мы бы все сделали одолжение (даже Microsoft), если бы просто дали IE6 умереть. Конечно, поскольку на корпоративных машинах происходит большое количество онлайн-активности с IE6, что на самом деле произойдет не скоро. (

2 голосов
/ 30 марта 2009

Например, с Дин Эдвардс ie7.js

2 голосов
/ 30 марта 2009

Исправление twinhelix png должно помочь вам

Страница:
...