IE6 PNG прозрачность
Как я могу исправить ошибку прозрачности PNG в IE6 для фонового изображения?
12 ответов
Мне нравится это решение Javascript, написанное Дэвидом Килли некоторое время назад. Он исключает совместимость браузеров и может использоваться с любым бэкэндом, который вы хотите. Это все еще требует чистого изображения 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 попробуйте библиотеку JavaScript 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="ie6.css" />
<![endif]-->
Я собираюсь получить значок Некроманта здесь.:)
Это не совсем исправление, но удобный обходной путь, который я время от времени использую для поддержки прозрачности в IE6 без какого-либо дополнительного кода вообще. Это не всегда отвечает всем требованиям, но довольно часто это делает.
Идея состоит в том, что большую часть времени вам все равно придется показывать PNG на фиксированном цветном фоне. Файл PNG может иметь заданный цвет фона, и IE6 будет соблюдать его. Вы получаете утилиту TweakPNG и открываете свой файл PNG. Там вы сможете добавить bKGD чанк, который указывает желаемый цвет фона. Просто введите цвет, который вам понадобится для отображения PNG, и все готово.
Одно замечание - файлы PNG часто содержат некоторые значения, чтобы компенсировать различные устройства отображения. Могут быть такие вещи, как предполагаемые цветовые пространства, цветность, гамма и т. Д. Они сами по себе неплохие, но IE как-то их неправильно истолковал, и в результате PNG оказались темнее, чем должны были (или, возможно, IE был единственный, кто понял это правильно? я не помню...)
В любом случае, если вы хотите, чтобы каждый браузер отображал ваши PNG одинаково, вы должны удалить эти фрагменты с помощью вышеупомянутой утилиты.
Вы можете быть смелым и просто заявить, что ваш сайт может не хорошо отображаться на IE6. Возможно, это не самый коммерчески мыслящий подход, но мы все сделаем одолжение (даже Microsoft), если просто позволим IE6 умереть. Конечно, поскольку на корпоративных машинах происходит большое количество онлайн-активности с IE6, что на самом деле произойдет не скоро.:(
То, что я делаю в проекте, над которым я работаю, берет пример с 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 по ходу дела, вместо того, чтобы закончить дизайн, а потом оглядываться в ужасе.
1. Добавьте условный CSS для IE6 в блоке head вашего документа:
<!--[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');
}
Хорошо, я практически новичок в 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";
}
}
Я перебил это?
Это отличная статья об этой проблеме. Таким образом, он предоставляет библиотеку JS под названием SuperSleight. Я использовал его в прошлом с приличным успехом.