5

更新 これはbackgroundIE8の問題のようです。CSS3 PIEは正しく機能しているように見えますが、背景がある場合は表示されません。背景のcssを完全に削除すると、再び表示されます。IE:

html, body{ 
  background: /*CSS */; /* Remove this property */
}

今私の質問は、CSS3PIEをバックグラウンドでIE8で正しく動作させるにはどうすればよいですか?

上記のコードを含むjsFiddleを次に示します。


元の質問


CSS3 PieJSEditionを使用してIE8で外観を複製しようとしています。これが私がそれをどのように見せたいかです:

正しい外観

CSS3PIEを使用したIE8での外観は次のとおりです。

IE8のスクリーンショット

ご覧のとおり、CSS3 PIEを実装すると、ボックスが消えます。私はこれまでCSS3PIEを使用したことがなく、何が問題なのかわかりません。これが私が使用しているコードです:

:私はJSエディションを使用しています(ホストされたCMSを使用しており、サーバー側のアクセス権ファイル使用できません)。.htc

CSS3Pieを呼び出すための私のコードは次のとおりです。

<!--[if lt IE 10]>
  <script type="text/javascript" src="/js/PIE.js"></script>
  <script type="text/javascript">
    $(function() {
       if (window.PIE) {
         $('.surround').each(function() {
           PIE.attach(this);
          });
         }
       });
  </script>
<![endif]-->

HTMLとCSSは次のとおりです。

<div class="row surround">
<div class="twelvecol">
 <p>Lorem Ipsum</p>
</div>
</div>

.surround
 {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box; 
  padding: 25px;
  background:#f5f2f7;
  border: 5px solid #b30005;
  -webkit-box-shadow: 0 5px 10px rgba(0,0,0,0.4);
  -moz-box-shadow: 0 5px 10px rgba(0,0,0,0.4);
  -o-box-shadow: 0 5px 10px rgba(0,0,0,0.4);
  box-shadow: 0 5px 10px rgba(0,0,0,0.4);
  -webkit-border-radius:25px;
  -moz-border-radius: 25px;
  -o-border-radius: 25px;
  border-radius:25px;
  border-top: solid #b30005 25px;
 }
4

2 に答える 2

18

@Spudleyが上記のコメントで述べたように、この問題はCSS3PIEWebサイトで説明されているz-indexの問題でした。

消える背景/境界線/影(z-indexの問題)

まず、PIEがCSS3装飾をレンダリングする方法について少し背景を説明します。すべてのVMLオブジェクトを保持する単一の要素が作成されます。このコンテナ要素は、ターゲット要素の前の兄弟として挿入され、絶対的に同じ座標に配置されます。ターゲット要素がposition:absoluteまたはposition:relativeの場合、css3-container要素にはターゲット要素と同じz-indexが与えられ、DOMツリーの前の兄弟であるため、後ろに表示されます。間に忍び寄る他の要素の。

ただし、ターゲット要素がposition:staticの場合、静的要素はz-indexスタッキングに参加しないため、これはあまりうまく機能しません。position:absolute css3要素をその背後に配置する唯一の方法は、z-index:-1を指定することです。残念ながら、これには悪い副作用があります。css3要素がターゲット要素の背後にあるだけでなく、それ自体がposition:staticである祖先要素の背景の背後にもあります。これにより、PIEがVMLレンダリングを正しく作成するが、親要素の背景の背後に表示されなくなる状況が発生します。

これを回避するために私が知っている唯一の方法は、次のいずれかです。

     make the target element position:relative, or
     make the ancestor element position:relative and give it a z-index.

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

特定の状況に応じてどちらか一方がより適切な場合があるため、CSS作成者はどちらを選択するかを制御できる必要があります。CSSの外側でposition:relativeを強制すると、IEが他のブラウザーと同期しなくなり、混乱を招く不整合が発生します。

したがって、PIEはどちらも実行せず、必要に応じていずれかの回避策を実装するのは作成者の責任です。ほとんどの場合、ターゲット要素に対してposition:relativeを追加するだけで問題ありません。

解決策は他の問題を引き起こす可能性があります。丸みを帯びた角を作るのは面倒な価値があるのだろうかと自問することになりました。一部のサイトでは、そうです。他のサイトでは、それはあなたの選択です。

于 2012-10-12T18:19:41.297 に答える
2

の代わりにbehavior: url(PIE.htc);、を設定できますbehavior: url(PIE.php);

于 2013-06-27T09:40:20.447 に答える