>  기사  >  웹 프론트엔드  >  qq 브라우저가 CSS3를 지원하지 않으면 어떻게 해야 합니까?

qq 브라우저가 CSS3를 지원하지 않으면 어떻게 해야 합니까?

藏色散人
藏色散人원래의
2021-01-05 10:20:233300검색

QQ 브라우저는 CSS3 솔루션을 지원하지 않습니다. 1. "-webkit-, -ms-" 호환성 접두사를 추가합니다. 2. "@keyframes, border-radius, box-shadow, backface와 같은 브라우저 엔진 접두사 속성을 추가해야 합니다. - 가시성 "등.

qq 브라우저가 CSS3를 지원하지 않으면 어떻게 해야 합니까?

이 튜토리얼의 운영 환경: windows7 시스템, qq 브라우저 V10.7.0&&CSS3 버전, Dell G3 컴퓨터.

관련 추천: "css 동영상 튜토리얼"

QQ 브라우저가 css3를 지원하지 않으면 어떻게 해야 하나요?

키프레임 및 애니메이션과 같은 CSS3 속성에는 webkit 및 ms라는 접두사가 추가되어야 합니다. 휴대폰의 다양한 브라우저에서는 더 많은 접두사가 추가될 수 있습니다. 이는 모든 브라우저에 적응한다는 목적을 달성합니다.

QQ 브라우저가 CSS3를 지원하지 않는 문제를 해결하는 방법은 다음과 같습니다.

1. 다음 호환성 접두사

-webkit-  /* 使用Webkit引擎的浏览器 */ 
-ms-    /* Internet Explorer */

2를 추가해야 합니다. ) 포함:

@keyframes
移动和变换属性(transition-property, transition-duration, transition-timing-function, transition-delay)
动画属性 (animation-name, animation-duration, animation-timing-function, animation-delay)
border-radius
box-shadow
backface-visibility
column属性
flex属性
perspective属性

3 , 예:

/* 简单属性 */ 
.myClass { 
    -webkit-animation-name: fadeIn; 
    -ms-animation-name: fadeIn; 
    animation-name: fadeIn;  /* 不带前缀的放到最后 */ 
} 
/* 复杂属性 keyframes */ 
@-webkit-keyframes fadeIn { 
    0% { opacity: 0; } 100% { opacity: 0; } 
} 
@-ms-keyframes fadeIn { 
    0% { opacity: 0; } 100% { opacity: 0; } 
} 
/* 不带前缀的放到最后 */ 
@keyframes fadeIn { 
    0% { opacity: 0; } 100% { opacity: 0; } 
}

위 내용은 qq 브라우저가 CSS3를 지원하지 않으면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.