3

再会。

我使用了大量的 CSS3 效果，并且在CSS3 Pie的帮助下在 IE 7 和 8 中渲染相同的效果时遇到了问题。

它对我需要的一些效果非常有效，但是 CSS3 Pie 的已知问题之一是布局，更具体地说，CSS3 Pie 使顶部边距在应用它的元素中消失，到目前为止我只在 IE 7 中遇到过这样的问题, IE 8 没有显示同样的问题。

我问是否有人知道如何解决这个问题，我想保持简单，只使用 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 周围使用了一个 wrapper div，并将 wrapper div 设置为 padding-top 等于 margin-top centerContainer div 的相同值。

<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 回答