Черный цвет вокруг PNG в IE Explorer с помощью jquery fade hover - PullRequest
Новая
       20

Черный цвет вокруг PNG в IE Explorer с помощью jquery fade hover

1 голос
/ 14 февраля 2012

Я искал весь день и пробовал все, чтобы убрать черный цвет вокруг моих PNG, когда я использую эффект Fadein jquery в Internet Explorer.Я должен что-то упустить, потому что весь код, который я использую, не исправляет это.Мою страницу можно посетить здесь: http://www.kaimeramedia.com/derek/Website

Я нашел этот бит кода: 

.item img {
    background: transparent;
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)";
/* IE8 */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF);
/* IE6 & 7 */
    zoom: 1;
}

, но я не могу заставить его работать со своей страницей меню (http://www.kaimeramedia.com/derek/Website/menu.php), который выглядит корректно только в шаблоне index.php.

Изображения хорошо выгорают и выключаются во всех браузерах, просто IE 6+ создает вокруг него действительно толстую черную рамку. Я знаю, что есть много сайтовкоторые обсуждают эту проблему, но мне не повезло, или, по крайней мере, я, должно быть, неправильно ввел код.

Я попытался отредактировать CSS и теги стиля ниже, но, похоже, это не дало никакого эффекта:

div.fadehover {
     position: relative;
}

img.b {
     position: absolute;
     left: 0;
     top: 0;

     z-index: 10;
     opacity: 0;
     filter: alpha(opacity=0);
     background: transparent;
}

.style2 {   font-style: italic;     color: #2D6773; }
.style3 {   color: #122833 }

Если бы кто-то мог помочь мне с рабочим решением для моего сайта, это было бы очень признательно.

Ответы [ 2 ]

0 голосов
/ 14 февраля 2012

У меня была точно такая же проблема, которая вызвана необходимостью IE css filter-property.В моей анимации я удаляю этот атрибут.

$ ('elem'). Css ('filter', '');

Старые IE просто не могут работать.Вы можете "устранить" многие недостатки IE с помощью javascript, только вызывая замедление этих браузеров.

Лучшее решение - это постепенная деградация и прогрессивное улучшение (более того на http://dev.opera.com/articles/view/graceful-degradation-progressive-enhancement/). Don 'я не могу заставить IE делать то, что он не может или не может делать хорошо. Я знаю, что клиентам трудно понять это, но мои дни попыток стать волшебником прошли.

0 голосов
/ 14 февраля 2012

Существует много способов решения этой проблемы:
1) Используйте вместо PNG8
2) Используйте js-скрипт, такой как Unit PNG Fix
3) Попробуйте добавить filter: 0к вашему изображению
4) Используйте и т. е. фильтруйте фон, эмулируя rgba (255,255,255,0) 

background: transparent;
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)"; /* IE8 */   
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF);   /* IE6 & 7 */      
zoom: 1;

5) Наконец, если прозрачность не требуется, просто используйте jpg

РЕДАКТИРОВАТЬ: Вот так выглядит одно из изображений в png8, я не вижу каких-либо серьезных отличий ... About PNG8

...