Was soll ich tun, wenn der QQ-Browser CSS3 nicht unterstützt?

Der QQ-Browser unterstützt keine CSS3-Lösung: 1. Fügen Sie das Kompatibilitätspräfix „-webkit-, -ms-“ hinzu. 2. Sie müssen Browser-Engine-Präfixattribute wie „@keyframes, border-radius, box-shadow, backface“ hinzufügen -Sichtbarkeit" usw.

Die Betriebsumgebung dieses Tutorials: Windows7-System, QQ-Browser V10.7.0 und CSS3-Version, Dell G3-Computer.

Verwandte Empfehlungen: „CSS-Video-Tutorial“

Was soll ich tun, wenn der QQ-Browser CSS3 nicht unterstützt?

CSS3-Attributen wie Keyframe und Animation müssen Webkit und MS vorangestellt werden. Für verschiedene Browser auf Mobiltelefonen können weitere Präfixe hinzugefügt werden. Dadurch wird der Zweck der Anpassung an alle Browser erreicht.

Die Methode zur Lösung des Problems, dass der QQ-Browser CSS3 nicht unterstützt, ist wie folgt:

1. Fügen Sie das folgende Kompatibilitätspräfix hinzu:

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

2. Die Hauptattribute, die das Browser-Engine-Präfix (Herstellerpräfix) hinzufügen müssen ) umfassen:

@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 , Beispiel:

/* 简单属性 */ 
.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; } 
}

Das obige ist der detaillierte Inhalt vonWas soll ich tun, wenn der QQ-Browser CSS3 nicht unterstützt?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!