web-dev-qa-db-ja.com

IE7 / 8でCSS3 border-radiusとbox-shadowをエミュレートする

私は小さなWebアプリケーションのHTMLに取り組んでいます。このデザインでは、角が丸く、影付きのコンテンツ領域が必要です。私はこれをCSS3で作成することができました。FirefoxとChromeでは問題なく動作します。

CSS3 Version

ただし、Internet Explorer 7および8（CSS3をサポートしていない）は別の話です。

Internet Explorer Version

1）IE固有の機能を使用してこれを達成するか、2）コンテンツ領域の周りにカスタム画像を追加して効果をエミュレートするようにDOMを（プログラムで）変更できる、簡単で軽量なJavaScriptソリューションがありますか？ ？

internet-explorercss3
48
Adam Maras

これは私の方法です。CSSファイルをIEブラウザにターゲットするために条件を使用します。

IDが#page_containerのdivがあるとします。通常のmaster.cssまたはcss3.cssファイルでは、幅、高さ、丸い角、ドロップシャドウをスタイルで指定します。

ここで、IEがページにヒットすると、設定した条件cssが取り込まれます。同じdiv＃page_containerに対して、幅、高さ、またはいくつかのパディングを変更できます。次に、背景画像を指定して、ドロップシャドウのような丸みを帯びたバージョンにします。

あなたのheadは次のようになります：

<head>
<link rel="stylesheet" type="text/css" href="master.css" />
<!--[if lte IE 8]> <link rel="stylesheet" type="text/css" href="ie.css" /> <![endif]-->
</head>

Master.cssファイルでは、メインdivに対して次の定義があります。

div#page_container {
  width: 960px;
  height: auto;
  padding: 10px 10px 10px 10px;
  background: #ccc;
  drop-shadow: whatever...
  rounded-corner: whatever...
}

ここで、ie.cssファイルで、2番目に参照されているため、定義はcascade downになるため、少し変更できます。

div#page_container {
  width: 960px;
  height: auto;
  padding: 15px 15px 15px 15px; /* this is key */
  background: #ccc url(/path/to/image.file) no-repeat top left;
}

背景画像にドロップシャドウが収まるように、十分な余白を追加します。カスケードされるため、元の10pxのパディングが上書きされ、ボックスモデルが拡張されて、余分なシャドウグラフィックに収まります。

この方法には、次のような利点があります。

  • IEのみがこの定義と画像の呼び出しを表示します。これが大容量アプリの場合、帯域幅と呼び出しに関連する遅延を節約します。
  • 同様に、すべてのブラウザに表示される角の丸いグラフィックスをハードコーディングしていないため、FirefoxおよびSafariユーザーは余分な画像呼び出しでサーバーにアクセスする必要がありません。
  • IEのチェック、新しいマークアップ、時間などを作成する別のJavaScriptプラグインを追加する必要はありません。
27
Braxo

この投稿をチェックしてください： http://www.smashingmagazine.com/2010/04/28/css3-solutions-for-internet-Explorer/

IE7/8のCSS3の特に丸い角とボックスシャドウをカバーします。

30
NakedBrunch

まず、CSSの境界半径が実装されるIE9まで、これに対する完璧なソリューションはないことを述べておきたいと思います。

それまでのさまざまなソリューションを次に示します。

角の丸い部分をシミュレートする多くのJSスクリプトの1つを使用できます。しかし、それらのどれも影を適切に実装していません。ここに、私が試したスクリプトと私の結論のリストを示します。このすべてのスクリプトには共通点があります。HTMLに追加の要素を配置して、角が丸くなっているように見せます。

  • DD Roundies ：このスクリプトは非常に軽量で、かなりうまく機能します。フレームワークなしで動作し、jQueryとPrototypeを使用してNiceを再生します（他のユーザーとうまく動作していると思いますが、確実に言えません）。 CSS3をサポートするブラウザーでCSS3プロパティを使用します。 IEの他のすべてと同じハックを使用します。これに対するアンチエイリアスは非常に効果的です。 editここで自分自身を修正する必要があります。これはHTCファイルで動作します。 HTMLに追加の要素を配置しません。

  • 曲線コーナー および jQueryプラグイン曲線コーナー ：これが好きです。アンチエイリアスは非常にうまく機能しています。そして、背景画像でナイスになります。ただし、CSS3シャドウではニースを再生しません。ブラウザがCSS3をサポートしているかどうかはチェックせず、DOMに要素を追加するといういソリューションを常に使用します。

  • 気の利いたコーナー ＆ jqueryコーナー ：両方とも悪いアンチエイリアスがあり、コーナーは非常にエッジの効いたように見えます。 jQueryコーナーでは、背景画像の処理に問題があります。

私の意見では、これらのどれも適切な解決策ではない理由は次のとおりです。

curvy corners dom messing screenshot http://meodai.ch/stackoverflow/curvy.png curvy dom mess

nifty dom mess http://meodai.ch/stackoverflow/nifty.png nifty dom mess

他にもいくつかありますが、この場所では言及できないと思います。

ご覧のとおり、彼らはあなたのdomに多くの要素を追加しています。これは、大量の要素に丸い角を追加する場合に問題を引き起こす可能性があります。古いブラウザ/コンピュータがクラッシュする可能性があります。影については、ほぼ同じ問題です。ボックスとフォントの影を処理するjQueryプラグインがあります。 http://dropshadow.webvex.limebits.com/

私の結論：私が小さな予算の仕事をしている場合、IEユーザーはエッジだけを持ち、影はありません。クライアントに使うお金がある場合ですから、CSSのみでそれをやっており、隅々まで画像を作成しています。あなた次第。

PS：IEユーザーはインターフェースの見苦しさに慣れており、とにかく角や影が欠けていることはわかりません：P

24
meo

リリースされたばかりでベータ版ですが、チェックしてください： http://css3pie.com/

22
CTarczon

ここにある.htcスクリプトの使用を開始しました。 Internet Explorer 6、7、および8のCSS3サポート

私が見たのは、IE6 +用のCSS3の最も単純な実装です。


.box {
  -moz-border-radius: 15px; /* Firefox */
  -webkit-border-radius: 15px; /* Safari and Chrome */
  border-radius: 15px; /* Opera 10.5+, future browsers, and now also Internet Explorer 6+ using IE-CSS3 */

  -moz-box-shadow: 10px 10px 20px #000; /* Firefox */
  -webkit-box-shadow: 10px 10px 20px #000; /* Safari and Chrome */
  box-shadow: 10px 10px 20px #000; /* Opera 10.5+, future browsers and IE6+ using IE-CSS3 */

  behavior: url(ie-css3.htc); /* This lets IE know to call the script on all elements which get the 'box' class */
}
8
MikeM

CSS3PIEを使用していますが、これは実装が非常に簡単で、behaviour：url（pie.htc）;を追加するだけです。 cssタグに行くと、あなたは行ってもいいです..あなたのためにそれをすべて行います。また、ボーダー画像、グラデーション、ボックスシャドウ、rgbaなどのサポートも含まれています...ソースは次のとおりです： http://css3pie.com/

6
Tim

IEのドロップシャドウの使用：

.shadow {
  background-color: #fff;
  zoom: 1;
  filter: progid:DXImageTransform.Microsoft.Shadow(color='#969696', Direction=135, Strength=3);
}

丸い角には DD_roundies を使用します。以下で説明するように、ちょうど9Kbは角を丸くするための良い妥協です！ ;-)

もちろんprogrammatically IE-specific features use 条件付きコメント ！ ;-)

4
Luca Filosofi

グレースフルデグラデーションを許可するには、CssUserAgentというこのスクリプトを http://www.cssuseragent.org/ から使用する必要があります。

3
Joberror

Nifty Corners Cube はニースの結果を生成し、IE5.5までずっと下位互換性があると想定されています。

2
Esko

DOMを変更して角を丸くするjqueryプラグインがあります。こちらをご覧ください：

http://blue-anvil.com/jquerycurvycorners/test.html

IEでレンダリングされたサンプルページ、ChromeとFF。Firebugを使用すると、プラグインがエフェクトを作成する1px x 1px divの束を導入することがわかります。

1
rcravens