CSS를 사용하여 jQuery 슬라이드 다운 섹션의 트리거 텍스트를 나타냅니다. 즉, 트리거 텍스트 위로 마우스를 가져 가면 커서가 포인터로 바뀌고 트리거 텍스트의 불투명도가 감소하여 텍스트에 클릭 동작이 있음을 나타냅니다 .

이것은 Firefox와 Chrome에서 잘 작동하지만 IE8에서는 불투명도가 변경되지 않습니다.

나는 성공하지 않고 다양한 CSS 설정을 시도했습니다.

예를 들어

HTML :

<h3 class="slidedownTrigger">This is the trigger text</h3>

CSS :

.slidedownTrigger
{
    cursor: pointer;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";
    filter: alpha(opacity=75);
    -khtml-opacity: 0.75;
    -moz-opacity: 0.75;
    opacity: 0.75;
}

IE가 불투명도를 변경하지 못하게하는 것은 무엇입니까? 참고 : CSS 문 순서를 바꾸고 IE 문을 사용하여 다양한 다른 요소 에서이 작업을 시도했습니다. 나는 또한 사용을 시도했다

-ms-filter: "alpha(opacity=75)";

그러나 성공하지 못했습니다.

IE8에서 불투명도 수정을 시도하기 위해 부족한 일이 있습니다.

어떤 아이디어?

이것이 여전히 8에 적용되는지는 모르지만, 역사적으로 IE는 "레이아웃이없는"요소에 여러 스타일을 적용하지 않습니다.

참조 : http://www.satzansatz.de/cssd/onhavinglayout.html

내가 작성한 것처럼 이것을 정확하게 설정하면 나에게 도움이되었습니다.

-moz-opacity: 0.70;
opacity:.70;
filter: alpha(opacity=70);

표준 호환 브라우저에 대해 불투명도를 먼저 설정 한 다음 다양한 버전의 IE를 설정해야합니다. 예를 참조하십시오.

그러나이 불투명 코드는 ie8에서 작동하지 않습니다.

.slidedownTrigger
{
    cursor: pointer;
    opacity: .75; /* Standards Compliant Browsers */
    filter: alpha(opacity=75); /* IE 7 and Earlier */
    /* Next 2 lines IE8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=75);
}

Firefox는 Standards Compliant 브라우저이므로 더 이상 필요하지 않으므로 -moz를 제거했습니다. 또한 -khtml은 감가 상각되므로 해당 스타일도 제거했습니다.

또한 IE의 필터는 w3c 표준에 따라 유효성을 검사하지 않으므로 페이지의 유효성을 검사하려면 다음과 같은 if IE 문을 사용하여 표준 스타일 시트를 IE 스타일 시트와 분리하십시오.

<!--[if IE]>
<link rel="stylesheet" type="text/css"  href="http://www.mysite.com/css/ie.css" />
<![endif]-->

즉, 특이점을 분리하면 사이트의 유효성이 검사됩니다.

분명히 알파 투명도는 IE 8의 블록 레벨 요소에서만 작동합니다. display : block을 설정하십시오.

사용 display: inline-block;IE8에서 작동하면이 문제를 해결할 수 있습니다.

FWIW opacity: 0.75는 모든 표준 호환 브라우저 에서 작동합니다.

CSS

CSS-Tricks 에서 다음을 사용했습니다 .

.transparent_class {
  /* IE 8 */
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";

  /* IE 5-7 */
  filter: alpha(opacity=50);

  /* Netscape */
  -moz-opacity: 0.5;

  /* Safari 1.x */
  -khtml-opacity: 0.5;

  /* Good browsers */
  opacity: 0.5;
}

나침반

그러나 더 나은 솔루션은 Opacity Compass mixin 을 사용하는 것입니다. 필요한 것은 @include opacity(0.1);브라우저 간 문제를 처리하는 것입니다. 여기 에서 예를 찾을 수 있습니다 .

다음은 IE 8에 대한 답변입니다.

그리고 IE8에서 알파가 작동하려면 IT가 작동합니다.

위치 : 상대적 또는 기타.

http://www.codingforums.com/showthread.php?p=923730

위의 답변 중 어느 것도 나를 위해 효과가 없었으므로 DIV 태그에 투명한 배경 이미지를 제공하여 모든 브라우저에서 완벽하게 작동했습니다.

이 코드는 작동합니다

filter: alpha(opacity = 50); zoom:1;

작동하려면 줌 속성을 추가해야합니다 :)

IE6-8에서 기본 불투명도 사용을 활성화하기 위해 polyfil을 추가 할 수도 있습니다.

https://github.com/bladeSk/internet-explorer-opacity-polyfill

이것은 jQuery 또는 다른 라이브러리가 필요하지 않은 독립형 polyfil입니다. 인라인 스타일에서는 작동하지 않는 몇 가지 작은 경고가 있으며 불투명도 폴리 필이 필요한 스타일 시트의 경우 동일한 원본 보안 정책을 준수해야합니다.

사용법은 간단하다

<!--[if lte IE 8]>
    <script src="jquery.ie-opacity-polyfill.js"></script>
<![endif]-->

<style>
    a.transparentLink { opacity: 0.5; }
</style>

<a class="transparentLink" href="#"> foo </a>