3

良い一日。

私はたくさんのCSS3エフェクトを使用していますが、CSS3Pieを使用してIE7および8で同じエフェクトをレンダリングするのに問題があります。

それは私が必要とするいくつかの効果に対して非常にうまく機能しますが、CSS3 Pieの既知の問題の1つはレイアウトです、より具体的にはCSS3 Pieはそれが適用される要素で上マージンを消します、私はこれまでIE7でそのような問題を抱えていました、IE8は同じ問題を示していません。

誰かがこの問題を解決する方法を知っているかどうか尋ねます、私はそのような問題を解決するためにCSSだけを使用して単純にしておきたいです、CSSに制限されない別のアプローチが必要かもしれないと思うので私は助けを求めます。

<style type="text/css" media="screen,projection">
#centerContainer {
        width:940px;
        margin-top:76px; /* without effect in the layout when CSS3 Pie is applyed */
        min-height:200px;
        margin-left:auto;
        margin-right:auto;
        margin-bottom:60px;
        background-color:#FF6;
        -webkit-border-radius: 6px;
        -moz-border-radius: 6px;
        border-radius: 6px;
        -moz-box-shadow: 0px 0px 10px #000;
        -webkit-box-shadow: 0px 0px 10px #000;
        box-shadow: 0px 0px 10px #000;
}

.css3pie { 
        behavior: url(http://localhost:999/css/PIE.htc)\9;
}
/*Note the "\9" is to limit this CSS property to IE 8 and lower since I didn't noticed the need for CSS3 Pie in IE 9 and above */
</style>


<div id="centerContainer" class="css3pie">
</div>

解決策と提案をいただければ幸いです。ありがとうございました。

4

1 に答える 1

1

centerContainer divの周りにラッパーdivを使用し、ラッパーdivをmargin-topcenterContainerdivと同じ値に等しいpadding-topに設定しました。

<style type="text/css" media="screen,projection">
#wrapper {
        paddin-top:76px;
/* same effect as the margin-top:76px; in the centerContainer */
}
#centerContainer {
        width:940px;
        min-height:200px;
        margin-left:auto;
        margin-right:auto;
        margin-bottom:60px;
        background-color:#FF6;
        -webkit-border-radius: 6px;
        -moz-border-radius: 6px;
        border-radius: 6px;
        -moz-box-shadow: 0px 0px 10px #000;
        -webkit-box-shadow: 0px 0px 10px #000;
        box-shadow: 0px 0px 10px #000;
}

.css3pie { 
        behavior: url(http://localhost:999/css/PIE.htc)\9;
}
/*Note the "\9" is to limit this CSS property to IE 8 and lower since I didn't noticed the need for CSS3 Pie in IE 9 and above */
</style>

<div id="wrapper">
    <div id="centerContainer" class="css3pie">
    </div>
</div>
于 2011-12-28T13:08:27.423 に答える