PIE.htc を使用して IE678 に一部の CSS3 属性をサポートさせる_html/css

PIE.htc を使用して IE678 に一部の CSS3 属性をサポートさせる_html/css_WEB-ITnose

WBOY

リリース： 2016-06-21 08:47:02

オリジナル

1386 人が閲覧しました

邪悪な IE カーネルブラウザ、これは多くのフロントエンドプログラマにとって頭痛の種です。。。今日は、PIE.htc を使用して IE ブラウザーで CSS3 border-radius、box-shadow、CSS3 背景 (-pie-background)、グラデーション、および RGBA 属性をサポートする方法を紹介します。

その方法を知っている友達はいくつかの提案を提供することができ、方法を知らない友達はそこから学ぶことができます。

ダウンロードアドレス: PIE.htc

PIE アプリケーションを使用するには、まず PIE アプリケーションをインポートする必要があります。ここでは、HTML ファイルではなく、CSS ファイルで動作を変更して導入されています。ファイルをインポートします。ここにはパスの問題が関係します。たとえば、現在のファイルが「/」の下にあり、CSS ファイルが「/CSS」の下にあり、PIE.htc が「/CSS」の下にある場合、動作: url(/css/PIE.htc) は動作: url ではありません。 (PIE.htc)。

ps: PIE.htc URL パスは、CSS ファイルではなく、現在の HTML ファイルに対する相対パスです。

次のコードは、次の一般的なスタイルに基づいて記述されています。 :

div{text-align: center;border: 1px solid #204D74;width: 200px;height: 100px;line-height: 100px;}

ログイン後にコピー

1. 境界半径の角丸

.borderRadius{         border-radius: 10px;         -webkit-border-radius: 10px;         -moz-border-radius: 10px;         background: #ABCDEF;         behavior: url(css/PIE.htc);}

ログイン後にコピー

レンダリングの実行

ps: 片側はサポートされていませんコーナー属性 (border-top-left-radius など) ですが、次のように記述することもできます:

.borderRadius{         border-radius: 0px 20px 0px 20px;         -webkit-border-radius: 0px 20px 0px 20px;         -moz-border-radius: 0px 20px 0px 20px;         background: #ABCDEF;         behavior: url(css/PIE.htc);}

ログイン後にコピー

レンダリングを実行

2 . box-shadow ボックスシャドウ

.boxShadow{         box-shadow: 10px 10px 10px #000;         -webkit-box-shadow: 10px 10px 10px #000;         background: #ABCDEF;         behavior: url(css/PIE.htc);}

ログイン後にコピー

レンダリング中

3. CSS3 背景の背景グラデーション

.linearGradient{         background: -webkit-gradient(linear, 0 0, 0 100%, from(#0000FF) to(#ABCDEF)); /*old webkit*/         background: -webkit-linear-gradient(#0000FF, #ABCDEF); /*new webkit*/         background: -moz-linear-gradient(#0000FF, #ABCDEF); /*gecko*/         background: -ms-linear-gradient(#0000FF, #ABCDEF); /*IE10*/         background: -o-linear-gradient(#0000FF, #ABCDEF); /*opera 11.10+*/         background: linear-gradient(#0000FF, #ABCDEF); /*future CSS3 browsers*/         -pie-background: linear-gradient(#0000FF, #ABCDEF); /*PIE*/         behavior: url(css/PIE.htc);}

ログイン後にコピー

レンダリング中

ps: 線形グラデーション (線形グラデーション)

4. RGBA

.rgba{         background: rgba(0,0,0,.6);         -pie-background: rgba(0,0,0,.6);         behavior: url(css/PIE.htc);}

ログイン後にコピー

黒の背景、透明度の値は 60% です

ps: box-shadow はサポートされていません

5. IE6 での PNG 画像の透明度の問題

.png img{         -pie-png-fix: true;         behavior: url(/PIE.htc);}.png{         background-image:url(img.png);         -pie-background:url(img.png);         behavior: url(/PIE.htc);}

ログイン後にコピー

追記: 画像には -pie-png-fix: true を直接使用し、背景画像には -pie-background を使用して、IE6 での PNG 透明度の問題を修正してください

このブラウザには IE6 カーネルがないため、誰でも見ることができるようにテストすることはできません。興味がある場合は、自分で試してみてください。しかし、結局のところ、これはもうそれほど重要ではないと思います。現在、多くの企業の古いバージョンは IE7 と互換性があり、古いバージョンは古いものになっています。

6. 背景サイズの背景には補足が含まれます

.backgroundSize{        background:#ABCDEF url(wait.png) center no-repeat;        background-size: contain;        /*behavior: url(css/backgroundsize.min.htc);*/        behavior: url(css/backgroundsize.min.htc);}

ログイン後にコピー

htc 追加の効果なし

htc 実行効果図の追加

フレームの幅と高さは 200x100、画像の幅と高さは 180x180 になります。このように、背景画像を使用すると、画像の高さがフレームの境界線を超えます。、背景画像を含められるようにするには、background-size を使用する必要がありますが、IE9 以降ではサポートされていません。

caniuse.com

上記は、PIE の使用法についての私の暫定的な理解です。他にも使用法がある場合は、メッセージを残してください。また知識があれば随時追加していきます！