Как я могу исправить ошибку прозрачности PNG в IE6 для фонового изображения?
Прозрачность PNG IE6
Ответ 1
Мне нравится это решение 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.
Ответ 2
Используйте это: http://www.twinhelix.com/css/iepngfix/
Это также хорошо для IE 5.5, но не для Mac-версий IE или более ранней версии IE.
Я использовал его на нескольких сайтах и не имел никаких проблем с ним.
Иногда может появиться уродливая серая рамка вокруг PNG, но до тех пор, пока не будет script.
Ответ 3
Используйте поведение PNG.
ie6.css:
img {
behavior: url("pngbehavior.htc");
}
page.html:
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="ie6.css" />
<![endif]-->
Ответ 4
Я пойду на значок Некроманта здесь.:)
Это не совсем исправление, но удобное обходное решение, которое я использую время от времени, чтобы поддерживать прозрачность в IE6 без какого-либо дополнительного кода. Он не всегда будет соответствовать законопроекту, но довольно часто он это делает.
Идея состоит в том, что большую часть времени вам нужно будет показывать свои PNG на фиксированном цветовом фоне. PNG файл может иметь заданный цвет фона, и IE6 будет его соблюдать. Что вы делаете, так это то, что вы получаете утилиту TweakPNG и открываете файл PNG. Там вы сможете добавить кусок bKGD, который задает желаемый цвет фона. Просто введите цвет, который вам понадобится, чтобы показать PNG, и все готово.
Одно примечание. PNG файлы часто включают некоторые значения, чтобы компенсировать различные устройства отображения. Там могут быть такие вещи, как намеченные цветовые пространства, цветности, гамма и т.д. Это не так плохо, как это было, но IE как-то неправильно истолковал их, и в результате PNG выглядели темнее, чем они должны были (или, может быть, IE был единственный, кто понял это правильно? Я не помню...)
В любом случае, если вы хотите, чтобы каждый браузер отображал ваши PNG одинаково, вы должны удалить эти куски с помощью вышеупомянутой утилиты.
Ответ 5
doublehelix png fix должно помочь вам
Ответ 6
Например, Dean Edwards 'ie7.js
Ответ 7
Вы можете быть храбрыми и просто заявить, что ваш сайт может плохо отображаться на IE6. Возможно, это не самый коммерчески настроенный подход, но мы бы сделали все одолжение (даже Microsoft), если бы мы просто позволили IE6 умереть. Конечно, поскольку большое количество онлайн-активности происходит на корпоративных машинах с прибитым к ним IE6, что на самом деле не скоро произойдет.: (
Ответ 8
Помните, что преобразование AlphaImageLoader может deadlock IE6.
Используйте PNG8s вместо обычных PNG32. Вы ограничены 256 цветами и 1 бит альфа-прозрачности, но это случайным образом блокирует браузер.
Ответ 9
1. Добавьте условный css для IE6 внутри блока заголовка вашего документа:
<!--[if (IE 6)]>
<link rel="stylesheet" type="text/css" href="locationOfyourCss/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');
}
Ответ 10
То, что я делаю в проекте, над которым я работаю, берет реплику от Paul Irish HTML5 Boilerplate и присваивает условные стили целая страница. Он подробно описывает это здесь, но вкратце, идея состоит в том, чтобы добавить условные проверки в HTML каждой страницы вашего сайт, применяемый к тегу тела. Например:
<!--[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. Независимо от того, как ваши исправления следуют стилям, к которым они применяются, я считаю более чистыми и удобными в использовании. Он также поощряет вас рассматривать пользователей ie6, когда вы идете, вместо того, чтобы заканчивать свой дизайн, а затем оглядываться в ужасе.
Ответ 11
Это отличная статья об этой проблеме. Таким образом, он предоставляет библиотеку JS под названием SuperSleight. Я использовал его в прошлом с приличным успехом.
Ответ 12
Хорошо, я практически новичок в html/js, но я думаю, что мне пришлось изменить Роба Аллена, чтобы исправить две проблемы:
- AlphaImageLoader() менял соотношение сторон моих изображений, поэтому мне нужно было восстановить исходные размеры ПОСЛЕ загрузки изображений.
- 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";
}
}
Неужели я его переусердствовал?