更新 これはbackground
IE8の問題のようです。CSS3 PIEは正しく機能しているように見えますが、背景がある場合は表示されません。背景のcssを完全に削除すると、再び表示されます。IE:
html, body{
background: /*CSS */; /* Remove this property */
}
今私の質問は、CSS3PIEをバックグラウンドでIE8で正しく動作させるにはどうすればよいですか?
上記のコードを含むjsFiddleを次に示します。
元の質問
CSS3 PieJSEditionを使用してIE8で外観を複製しようとしています。これが私がそれをどのように見せたいかです:
CSS3PIEを使用した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;
}