0

Web ページで CSS3 境界半径スタイルを使用しており、IE8 を含む主要なブラウザー間でクロスブラウザー対応にしたいと考えています。

したがって、border-radius.htc ファイルを使用してこれを実現しようとしています。私のCSSスタイルでborder-radiusが使用されているところはどこでも、私は次のようなコードを書いています:

   -webkit-border-radius: 6px 6px 6px 6px;
    border-radius: 6px 6px 6px 6px; 
    behavior:url(border-radius.htc);

残念ながら、IE8 で Web ページを確認すると、border-radius 動作を持つすべての背景がまったく表示されなくなります。

Web ページはhttp://www.domainandseo.com/portfolio/dominos/index.htmlにあります。

どんな提案でも大歓迎です。

4

5 に答える 5

2

9より前のバージョンのInternetExplorerは、このプロパティをサポートしていません。互換性マトリックスを確認してください。古いブラウザで丸みを帯びた角が必要な場合は、丸みを帯びた境界線の画像を含むコンテナを介してそれらを実現する必要があります。

于 2012-11-08T06:40:21.653 に答える
2

どの「border-radius.htc」ファイルを使用しているかはわかりませんが、CSS3 PIEなどを使用している場合は既知の問題です。彼らのページから：

これを回避する唯一の方法は、次のいずれかです。

  • ターゲット要素を position:relative にする、または
  • 祖先要素を position:relative にして、z-index を与えます。

これらの回避策はどちらも、子要素の配置と z-index スタックに関して望ましくない副作用を引き起こす可能性があります。PIE は簡単にどちらか一方を強制することができますが、次のようになります。

  • 特定の状況に応じて、どちらか一方がより適切な場合があるため、CSS 作成者はどちらを選択するかを制御できる必要があります。
  • CSS の外側で position:relative を強制すると、IE が他のブラウザーと同期しなくなり、紛らわしい矛盾が発生します。
于 2012-11-08T07:31:52.933 に答える
1

.htc ファイルをロードするよりも、JavaScript ポリフィルを使用する方がよい場合があります。頭に浮かぶのは、http://jquery.malsup.com/corner/ にある Mike Alsup の Corner jQuery プラグインです。条件付きコメントを使用して、IE 8 以前でのみロードできます。

<!--[if lte IE 8]>
<script src="path_to_your_scripts_folder/jquery.corner.js"></script>
<script>
    $(function(){
        $('your_selector_here').corner('corner_radius_in_pixels');
    });
</script>
<![endif]-->
于 2012-11-08T07:17:01.107 に答える
-3

これを試してみてください：

#main{position:relative;}

この ID は、IE 固有のスタイルシートでのみ言及してください。

于 2012-11-08T07:02:19.690 に答える