2013-05-18 5 views
1

내 웹 사이트에 연설 거품을 만들기 위해 아래 CSS를 사용했습니다. Yep Website'-moz-transform'은 무엇을 의미합니까?

Google 크롬 및 사파리는 괜찮아 보입니다. 파이어 폭스에서 나에게주는 'moz-transform'을 보여주지 않는다. 나는 디자인이 좋지 않다. 이 문제를 해결하는 방법을 찾으려합니다. 미리 감사드립니다.

/*SPEECH BUBBLES*/ 
    .wiget_bottom_all li h3 { 
     position:relative; 
     padding:15px; 
     margin:1em 0 3em; 
     color:#fff; 
     background:#00B9B7; 
     /* css3 */ 
     background:-webkit-gradient(linear, 0 0, 0 100%, from(#f04349), to(#c81e2b)); 
     background:-moz-linear-gradient(#f04349, #c81e2b); 
     background:-o-linear-gradient(#f04349, #c81e2b); 
     background:linear-gradient(#00B9B7, #00B9B7); 
     -webkit-border-radius:10px; 
     -moz-border-radius:10px; 
     border-radius:10px; 
    } 


    /* THE TRIANGLE 
    ------------------------------------------------------------------------------------------------------------------------------- */ 

    /* creates the wider right-angled triangle */ 
    .wiget_bottom_all li h3:before { 
     content:""; 
     position:absolute; 
     bottom:-20px; /* value = - border-top-width - border-bottom-width */ 
     left:105px; /* controls horizontal position */ 
     border:0; 
     border-right-width:30px; /* vary this value to change the angle of the vertex */ 
     border-bottom-width:20px; /* vary this value to change the height of the triangle. must be equal to the corresponding value in :after */ 
     border-style:solid; 
     border-color:transparent #00B9B7; 
     /* reduce the damage in FF3.0 */ 
     display:block; 
     width:0; 
    } 
+0

파이어 폭스에서 그 지느러미 만 지닌다. – samayo

답변

1

브라우저 코드에 문제가있는 것으로 보입니다. 크로스 브라우저 호환 코드에 대한 CSS 트릭을 참조 할 수 있습니다. Perhaps, read this.

+0

질문에 답하지 않는다. 이것은 답이 아니라 주석이다. –

2

Firefox가 공급 업체 접두사 CSS 규칙을 지원하기 위해 중단되었습니다. 접두사가없는 CSS 규칙 (transform: ...)이 트릭을 수행 할 것입니다.

http://caniuse.com/#search=transform에 따르면 변환 접두사 vendored하지 규칙은 파이어 폭스 (19)

편집 이후 파이어 폭스에서 지원되었습니다 s.t.에 예제 코드에-변환 -moz 사용하지 않는 당신은 아마 당신의 CSS에서 다른 곳에서 그것을 사용한다. 그렇지 않으면 오류 메시지는 정말로 거기에 있으면 안된다.

+1

MDN 문서는 Firefox 16 이후에 접두사가없는'transform'이 지원된다고 말합니다 : https://developer.mozilla.org/en-US/docs/Web/CSS/transform –

관련 문제