IE 7과 8에서 불투명도와 경계 반경 충돌을 해결하는 방법은 무엇입니까?

Question

I 코드는 아래와 같이 리 소자 CSS를 추가 여기

#slider1 .overview li{ 
    width: 70px; 
    height: 70px; 
    float: left; 
    border-radius: 40px; 
    -moz-border-radius: 40px; 
    -webkit-border-radius:40px; 
    behavior: url(PIE.htc) 
    opacity: 0.5; 
    filter: "alpha(opacity=50)"; 
    -ms-filter: "alpha(opacity=50)"; 
    border: 3px solid #FFF; } 

난 IE7 IE8 및 불투명도를 지원하기 위해 경계 반경 필터를 지원하는 PIE.htc 파일을 추가했다.

내 문제는 제가 필터에만 적용됩니다 내가 불투명도를 제대로 얻고 있습니다. IE 용 테두리 반경을 지원하는 PIE.htc 파일을 추가 할 때 불투명도가 li 요소에 적용되지 않습니다.

필터와 PIE.htc 간의 충돌을 해결하는 방법을 알고 있습니까?

Answer 1

예, CSS3Pie와 filter 사이에 충돌이 발생합니다. 그것은 불가피합니다. filter에는 다른 브라우저 기능과 충돌하는 많은 알려진 버그가 있습니다. CSS3Pie는 VML을 사용하며 실제로는 filter과 충돌한다는 소식에 놀라지 않습니다. 사실

는 CSS3Pie 문제의 빠른 검색이 얼마 동안 기록했지만 아직 처리되지되었습니다 CSS3Pie 알려진 문제가 있음을 보여줍니다 - 볼이 https://github.com/lojjic/PIE/issues/46

I가 제안 할 수 있습니다 첫 번째 옵션 당신은이 기능들 중 하나를 간단히 버려야합니다. 이 특정 요소에서 둥근 모서리가 얼마나 중요한지는 모르겠지만 IE에서 참조를 제거하여 pie.htc을 제거하면 filter은 자체적으로 작동하기 때문에 충돌은 발생하지 않습니다. 불투명도 설정을 삭제하면 둥근 모서리보다 사이트의 유용성에 더 많은 차이가있을 것이라고 생각되지만 둥근 모서리 만 남겨두기 위해 filter을 제거하는 경우에도 마찬가지입니다.

두 번째 옵션은 대신 배경에 rgba 색을 사용하는 것입니다. 이전 버전의 IE는 rgba 색상을 지원하지 않지만 CSS3Pie는 CSS3Pie에서 투명 효과와 둥근 모서리의 모든 작업을 수행 할 수 있습니다. 즉, 충돌을 피할 수 있습니다. rgba은 평이한 것과 다릅니다. opacity - 배경을 투명하게 만들지 만 전경 (예 : 요소 내부의 텍스트)에는 영향을 미치지 않으므로 이것은 중요 할 수도 있습니다.이 경우 적절한 해결책이 아니거나 함께 거주 할 수도 있습니다.

제가 생각할 수있는 마지막 옵션은 CSS3Pie 제작자에게 이전에 링크 한 문제를 해결할 것인지 물어 보는 것입니다. 그러면 아마 CSS3Pie의 기능으로 opacity을 polyfill에 추가해야 할 것입니다. 나는 그것이 그 (것)들을위한 일의 상당히 큰 조금 일 것이라는 점을 상상한다, 그러나 사람들이 그것을 요구하는 경우에 고려할 무언가일지도 모른다. (즉, 그들이 그것을하기로 결정했다하더라도, 나는 당신이 당신의 사이트에서 사용할 수있는 대답이 될만큼 빨리 끝날 것입니다).

Answer 2

불투명도가있는 두 개의 파란색 원을 한 페이지에 표시하고 싶었던 비슷한 문제가있었습니다. 배경으로 반복 파이와 충돌 한 MS 필터 규칙을 사용하지 ... ... 투명성과 PNG로 밖으로 저장

.transparent-blue { 
     background: url(../../img/transparent-blue.png); 
    } 

을 - 나는 최선의 해결책은 하나의 블루 픽셀을 사용하는 것이었다 발견했다. htc.

그것은 내가에만 별도의 스타일 시트를 통해 IE8에이 솔루션을 적용하는 것이 없습니다에 가치가있다 ...이 텍스트에 대한 더 나은로 내가 RGBA를 사용되는 기본 스타일 시트

<!--[if lte IE 8]> 
    <link rel="stylesheet" href="/css/compiled/ie8.css"> 
    <![endif]--> 

(즉, '아무튼 텍스트를 불투명하게 만듭니다.)