css clip-path가 Opera와 Internet Explorer에서 작동하지 않습니다.

대각선 오른쪽 가장자리가있는 progressbar-like 요소를 구현하기 위해 클리핑을 사용해야하고 css3 clip-path가 가장 좋은 옵션 인 것 같습니다.css clip-path가 Opera와 Internet Explorer에서 작동하지 않습니다.

Firefox와 Chrome에서 작동하는 솔루션을 쉽게 찾을 수 있지만 몇 시간 동안 시험을 보더라도 Internet Explorer 나 Opera에서 아무런 진전을 이룰 수 없었습니다. 단순히 클립 경로를 무시하는 것처럼 보입니다!

필자는 오페라를 더 잘 연구했으며 몇 가지 버전부터 클립 경로 (-o-clip-path는 존재하지 않는 것 같음)를 지원합니다.

여기 CSS와 모두를 포함하여 내 전체 HTML 파일입니다. 복사/붙여 넣기가 가능하며 실행하면 누구나 유용한 정보가 있습니까? 미리 감사드립니다.

<!DOCTYPE html> 
<html> 
<head> 
    <title>Prova Clipping</title> 

    <svg> 
    <defs> 
     <clipPath id="prova_clip"> 
     <polygon points="10 0, 1000 0, 1000 50, 0 50"/> 
     </clipPath> 
    </defs> 
    </svg> 

    <style type="text/css"> 
    body { 
    color: purple; 
    background-color: blue; 
    } 
    #barra { 
    position: relative; 
    margin: 50px; 
    width:300px; 

    -moz-transform: rotate(180deg);  
    -webkit-transform: rotate(180deg);  
    -o-transform: rotate(180deg);  
    -ms-transform: rotate(180deg);  
    } 
    .barra { 
    position: absolute; 
    height: 50px; 
    } 
    #barra_sfondo { 
    width: 20%; 
    background: linear-gradient(grey, black); 

    -moz-transform: rotate(180deg);  
    -webkit-transform: rotate(180deg);  
    -o-transform: rotate(180deg);  
    -ms-transform: rotate(180deg);  

    -webkit-clip-path: url(#prova_clip); 
    -ms-clip-path: url(#prova_clip); 
    clip-path: url(#prova_clip); 
    } 
    #barra_colore { 
    width: 100%; 
    background: linear-gradient(to right, yellow, red); 
    } 
    </style> 
</head> 

<body> 
    <div id="barra"> 
     <svg class="barra" id="barra_colore"> 
      <polygon points="0 0, 100% 0, 100% 100%, 0 100%"/> 
     </svg> 
     <svg class="barra" id="barra_sfondo"> 
      <polygon points="0 0, 100% 0, 100% 100%, 0 100%"/> 
     </svg> 
    </div> 
</body> 
</html>

출처

2014-01-22 swK

-3

CSS에는 아래 참조를 사용하십시오.

/ 선택기 해킹 대부분의 크로스 브라우저 지원에 대한 */

/* IE6 and below */ 
* html #div { 
height: 300px; 
} 

/* IE7 */ 
*+html #div { 
height: 300px; 
} 

/* IE8 */ 
#div { 
height: 300px\0/; 
} 

/*IE7 & IE8*/ 
#div { 
height: 300px\9; 
} 

/*Hide from IE6 and LOWER*/ 
#div { 
height/**/: 300px; 
}

출처

2014-02-01 06:47:31 Jaymin

이 문제와는 아무 상관이있다. – BrianFreud

,이 코드는 당신이 필요합니다

-webkit-mask: url(#prova_clip); // Opera and Chrome 
mask: url(#prova_clip); 
clip-path: url(#prova_clip); // Firefox

mask-image 인한 인적가 currenty 웹킷에서만 지원됩니다 브라우저는 프리 픽스 아래에 있지만 Firefox는 접두어가 붙지 않는 clip-path 속성을 인식합니다. 나는 왜 그런지 모르지만 -webkit-clip-path는 Opera에서 작동하지 않습니다.

Internet Explorer는 현재 마스크 또는 클립 경로 속성을 지원하지 않습니다.

참조 링크 :
http://caniuse.com/#search=clip-path
http://caniuse.com/#search=mask

출처

2014-11-07 12:24:04

css clip-path가 Opera와 Internet Explorer에서 작동하지 않습니다.

답변

관련 문제