jquery fade hover를 사용하는 IE Explorer에서 PNG 주위의 검은 색

인터넷 익스플로러에서 Fadein jquery 효과를 사용할 때 나는 하루 종일 검색하여 PNG 주위의 검정색을 제거하기 위해 모든 것을 시도했습니다. 내가 사용하는 모든 코드가 문제를 해결하지 못하기 때문에 나는 뭔가를 놓치고 있어야합니다. 나는 코드의이 비트 발견 http://www.kaimeramedia.com/derek/Website jquery fade hover를 사용하는 IE Explorer에서 PNG 주위의 검은 색

: 내 페이지는 여기 방문 할 수

.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)와 함께 작동하도록 그것을 얻을 수 없습니다입니다. 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 }

사람이 정말 감사하겠습니다 내 사이트에 작동하는 솔루션을 도와 수 있다면.

출처

2012-02-13 Derek Holliday

결국 나는 bg와 완벽하게 겹쳐진 jpgs를 만들었고 별도의 메뉴 파일과 IE 용 PHP 파일을 만들었습니다. Internet Explorer 브라우저가 IE8 이하인 것을 감지하면 새로 고칩니다. < ! - [if IE 8]>; –

가이 문제에 대한 많은 솔루션입니다 :
1) 이미지
4) 사용에 filter: 0를 추가하십시오) 대신
2) Unit PNG Fix
3으로 같은 JS 스크립트를 사용하십시오 PNG8를 사용하여 배경을 필터링하여 예 투명성이 필요하지 않은 경우 RGBA를 모방하는 것은 (0,0,0,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에서 어떻게 보이는지, 내가하는 CSS 필터 특성 IE에 의해 발생이 동일한 문제를 했어 ... 주요 차이점 About PNG8

출처

2012-02-13 20:39:29 elclanrs

이들은 인터넷에서 찾은 것과 같은 해결책입니다 ... 당신이 제공하는 것을 보도록하겠습니다 : 1. png8은 gif를 사용하는 것보다 훨씬 낫지 않습니다 ... 나는 투명도가 필요합니다. 2. Unit PNG Fix가 작동하지 않는 것 같지만, 내 사이트에서 작동하게하는 방법을 알려 주시면 환영 할 것입니다. 3. 필터 : 0은 바뀌지 않았고, 이미지가 겹쳐져서 검은 색이 보이기 전까지는 이미지가 오버레이 된 것만 악화되었습니다. 4.여러분이나 다른 누군가가 내 코드에서 rgba를 에뮬레이션하는 것에 대해 설명 할 수 있다면 유용 할 것입니다. –

5. 전체적인 요점은 투명도 작업을 뒤로 물러나게 만드는 방법을 찾는 것입니다. jpeg를 사용하고 배경을 변경하려면 각 메뉴 항목도 변경해야합니다. 거기에는 많은 솔루션이있을 것이라고 확신합니다. 누군가 내 코드로 작업 예제를 보여주고 싶다면 감사 할 것입니다. –

에서 4 번 코드를 추가했습니다. 작동하는지 확인하십시오. – elclanrs

이 표시되지 않는 것입니다 필요합니다. 내 애니메이션에서이 속성을 제거합니다.

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

이전 IE는 단순히 수행 할 수 없습니다. 자바 스크립트를 사용하여 많은 IE 취약점을 "능가"할 수 있습니다. 이러한 브라우저가 더 느려지 게 만듭니다.

최상의 솔루션은 우아한 분해 및 점진적 향상입니다 (그 중 많은 것은 http://dev.opera.com/articles/view/graceful-degradation-progressive-enhancement/). IE가 할 수 없거나 할 수없는 일을하지 마십시오. 나는 클라이언트가 이걸 이해하는 데 어려움을 겪고 있지만 마술사가 되려는 나의 시절은 끝났음을 안다.

출처

2012-02-13 22:04:28

jquery fade hover를 사용하는 IE Explorer에서 PNG 주위의 검은 색

답변

관련 문제