1
div : : after 의사 요소를 사용하여 div의 아래쪽에 뾰족한 삼각형을 그립니다. 그것은 설계된대로 작동합니다. 그러나 div에 대한 불투명도 필터를 추가하면 IE에서 작동하지 않습니다 (IE8에서 테스트 중입니다). 그것은 FF, 크롬, 그리고 사파리에서 잘 작동합니다. 여기불투명도 필터를 사용할 때 css : after 의사 요소에 Internet Explorer 문제가 발생했습니다.
는 HTML입니다 :
여기<html>
<head></head>
<body>
<div id="demo"></div>
</body>
</html>
는 CSS : link text
이제 IE 불투명도 필터를 추가 : IE에서
#demo {
background-color: #333;
height: 100px;
position: relative;
width: 100px;
}
#demo:after {
content: ' ';
height: 0;
position: absolute;
width: 0;
border: 10px solid transparent;
border-top-color: #333;
top: 100%;
left: 10px;
}
실행을 여기에 이미지처럼 보이는 결과를 볼 수 : #demo에게 이렇게 보이고 IE에서 다시 실행하십시오.
#demo {
background-color: #333;
height: 100px;
position: relative;
width: 100px;
filter: alpha(opacity=50);
}
불투명도 필터는 작동하지만 div 하단의 삼각형이 사라졌습니다. 다른 모든 브라우저에서 똑같은 기능이 작동합니다 (유일한 차이점은 Internet Explorer 전용 "필터 : 알파 (불투명도 = 50)"대신 "불투명도 : 0.5"를 사용해야한다는 것입니다).
이 일이 일어나고 있으며, 그 일을 어떻게 해결할 수 있습니까?
감사합니다.
렉스. 구현을 변경하고 대신 삼각형을 그리려면 after 대신에 두 번째 div를 사용했습니다. –