ホームページ >ウェブフロントエンド >フロントエンドQ&A >qq ブラウザが css3 をサポートしていない場合はどうすればよいですか?

qq ブラウザが css3 をサポートしていない場合はどうすればよいですか?

藏色散人
藏色散人オリジナル
2021-01-05 10:20:233319ブラウズ

Qq ブラウザは CSS3 ソリューションをサポートしていません: 1. 「-webkit-、-ms-」互換性プレフィックスを追加します。 2. 「@keyframes、border-radius、box などのブラウザ エンジン プレフィックス属性を追加する必要があります」 -影、背面の可視性」など。

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 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。