IEをCSS3に対応させる方法-フロントエンドQ&A-php.cn

IEをCSS3に対応させる方法

藏色散人

リリース： 2023-01-05 16:09:35

オリジナル

2386 人が閲覧しました

ie で css3 をサポートする方法: 1. "ie-css3.htc" をダウンロードし、サーバーディレクトリに配置して使用します; 2. "css3 PIE.htc" ファイルをダウンロードし、" PIE.htc」ファイルを Web サイトのディレクトリにアップロードします。

IEをCSS3に対応させる方法

#この記事の動作環境: Windows 7 システム、Dell G3 コンピューター、HTML5&&CSS3 バージョン。

方法 1: ie-css3.htc を使用する

ie-css3.htc は、IE ブラウザーが box-shadow だけでなく、いくつかの CSS3 属性をサポートできるようにする htc ファイルです。 IE ブラウザが角丸属性 border-radius とテキストシャドウ属性 text-shadow をサポートするようにします。

使用方法: ダウンロードしてサーバーディレクトリに置きます。

次のコードを

に記述します:

<!--[if IE]>
<style type="text/css">img, #testdiv, .testbox{behavior: url(http://yourdomain.com/js/ie-css3.htc);}
</style>
<![endif]-->

ログイン後にコピー

方法 2: css3 pie プラグインを使用する

css3 pie は、IE ブラウザーがいくつかの css3 属性をサポートできるようにするプラグインです。

公式 Web サイト: http://css3pie.com/

[推奨学習:

css ビデオチュートリアル ]

使用方法:

ステップ 1: css3 PIE.htc ファイルをダウンロードします

ステップ 2: PIE.htc ファイルを Web サイトのディレクトリにアップロードします。このディレクトリを覚えていれば、任意のディレクトリにアップロードできます。

ステップ 3: 以下に示すように、HTML ファイルを作成し、css3 コードを記述し、PIE.htc を導入します。

#id {
border: 1px solid #999;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
behavior: url(path/to/PIE.htc);
}

ログイン後にコピー

注: .htc ファイルのパスは、パスに対する相対パスです。 CSS ファイルに相対するのではなく、HTML ファイルの。

いくつかの既知の問題:

この方法は万能ではなく、いくつかの制限や注意が必要な点があります。

1. z-index に関連する問題

IE でのこれらの CSS3 効果は、VML を利用して実装されています。VML は、角丸または投影効果のコンテナ要素を描画し、コンテナ要素がターゲット要素として使用されます。兄弟ノードが挿入された後、ターゲット要素がposition:absoluteまたはposition:relativeの場合、css3-container要素は同じz-index値に設定されます。DOMツリーでは、同じレベルの要素は常に後から前のレベルでカバーされるため、これによりカバレッジが達成され、他の要素が挿入される可能性が回避されます。

それでは、ここで問題が発生します。現在の要素の位置属性が静的 (デフォルトの属性) である場合、z-index 属性は役に立たず、オーバーライドはありません。したがって、現時点では、 IE ブラウザでの CSS3 のレンダリングは成功しません。解決策も非常に簡単で、ターゲット要素の位置を相対的に設定するか、祖先要素の位置を相対的に設定して、z インデックス値 (-1 は不可) を割り当てます。

2. 等価パスの問題

IE ブラウザの動作属性は HTML ドキュメントに相対的ですが、他の CSS 属性とは異なり、CSS ドキュメントに相対的ではありません。このため、pie.htc ファイルの使用が不便になります。絶対パスがルートディレクトリにある場合は、CSS ファイルを移動するのが不便です。相対パスが HTML ドキュメントにある場合は、別の HTML ページでの pie.htc ファイルの再利用性が大幅に低下します。同時に、border-image の後ろにあるような URL 属性パスも扱いが困難です。

3. 略語の問題

IE で CSS3 レンダリングを実装するには、PIE を使用します (他のメソッドについても同様です)。角丸などの省略形のみを使用できます。 set border-top -left-radius は左上の丸い角を意味しますが、PIE はこの書き方をサポートしていません。これは正直な略語のみです。

4. 正しい Content-Type を指定します

IE ブラウザで htc ファイルをサポートしたい場合は、「text/x-component」という単語を含む content-type ヘッダーが必要です。それ以外の場合は、行動は無視されます。大多数の Web サーバーは正しいコンテンツタイプを提供しますが、一部には問題があります。

PIE メソッドがマシン上で無効であることが判明した場合、つまり、ここで参照している pie.htc ファイルが無効であることが判明した場合は、サーバーの構成を確認してください。最新のものに更新する必要がある場合があります。コンテンツタイプ。たとえば、Apache の場合、.htaccess ファイルで次の操作を行うことができます。

AddType text/x-component .htc

ログイン後にコピー

ただし、何らかの理由で、サーバー構成 (パブリックホストやスペースによって提供されるサーバーなど) を変更することはできません。サービスプロバイダー）、PHP ファイルを使用して間接的に htc ファイルを呼び出すことができます。この PHP ファイルのコードを示すだけで、次のようにその意味がわかるでしょう。

<?php
header( &#39;Content-type: text/x-component&#39; );
include( &#39;pie.htc&#39; );
?>

ログイン後にコピー

「text/x-component」という単語を含む Content-type ヘッダーを PHP ファイルに追加します。同時に pie.htc ファイルを呼び出します。

上記の php ファイルについては、pie.php (右クリック – [ターゲット | 名前を付けてリンクを保存]) をクリックするか、新しい php ファイルを直接作成して、上記の 2 つのファイルをコピーして配置することもできます。コード行をそれに追加します。または、この記事で提供されている元のパッケージ化リソースのラッパーフォルダーにこの php ファイルがありますが、名前が大文字になっています。

上記のphpファイルを使用する場合、pie.phpとpie.htcを同じフォルダに置く必要があり、同時にCSSでの動作は