internet-explorer-8 배경이미지만 - 불투명도 CSS는 IE8에서 작동하지 않습니다.




투명하게 버튼 (9)

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 믹스 인을 사용하는 것입니다. 필요한 것은 @include opacity(0.1); 브라우저 간 문제를 해결할 것입니다. 여기 에서 예제를 찾을 수 있습니다.

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;
}

불투명도를 변경하는 Internet Explorer를 중지하는 이유는 무엇입니까? 참고 : 나는 다양한 다른 요소에 대해 CSS 문장의 순서를 바꾸고 IE 자체를 사용하는 방법을 시도했다. 나는 또한 사용을 시도했다.

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

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

나는 IE8에서 불투명도 수정을 시도하기 위해 물건을 다 써 버렸습니다.

어떤 아이디어?


또한 polyfil을 추가하여 IE6-8에서 원시 불투명도 사용을 가능하게 할 수 있습니다.

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

이것은 jQuery 나 다른 라이브러리를 필요로하지 않는 독립 실행 형 폴리 파일입니다. 인라인 스타일에서는 작동하지 않는 몇 가지주의 사항이 있으며, 불투명도가 필요한 스타일 시트의 경우 동일한 출처 보안 정책을 준수해야합니다.

사용법은 간단합니다.

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

display: inline-block; 사용 display: inline-block; 이 문제를 해결하기 위해 IE8에서 작동합니다.

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


이 코드는 작동합니다.

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

당신은 그것을 위해 줌 속성을 추가해야합니다 :)


분명히 알파 투명도는 Internet Explorer 8의 블록 수준 요소에서만 작동합니다. display : block을 설정합니다.



위의 답변 중 아무 것도 나를 위해 일한 적이 없기 때문에 대신 DIV 태그에 투명한 배경 이미지를 제공 했으므로 모든 브라우저에서 완벽하게 작동했습니다.



border-spacingpadding 사용하여 CSS에서 다음과 같이 간단하게 할 수 있습니다.

table {
  border-collapse: collapse;
}

td, th {
  padding: 1em;
  border: 1px solid blue;
}
<table>
  <tr>
    <th>head_1</th>
    <th>head_2</th>
    <th>head_3</th>
    <th>head_4</th>
  </tr>
  <tr>
    <td>txt_1</td>
    <td>txt_2</td>
    <td>txt_3</td>
    <td>txt_4</td>
  </tr>
</table>





css internet-explorer-8 opacity