IE8에서 불투명 CSS가 작동하지 않습니다

IE8에서 불투명 CSS가 작동하지 않습니다

---

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

---

None of the answers above worked for me, so I just gave my DIV tag a transparent background image instead, that worked perfectly for all browsers.

---

This code works

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

You need to add zoom property for it to work :)

---

You can also add a polyfil to enable native opacity usage in IE6-8.

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

This is a stand alone polyfil that does not require jQuery or other libraries. There are several small caveats it does not operate on in-line styles and for any style sheets that need opacity polyfil'd they must adhere to the same-origin security policy.

Usage is dead simple

<!--[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>

참고URL : https://stackoverflow.com/questions/1948176/opacity-css-not-working-in-ie8