如何解决IE7中使用CSS3 Pie时元素上边距消失的问题

Posted 2023-05-08

【中文标题】如何解决IE7中使用CSS3 Pie时元素上边距消失的问题

【英文标题】：How to solve the disapearing of top margins in element when using CSS3 Pie in IE7

【发布时间】：2012-01-28 02:39:51

【问题描述】：

美好的一天。

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

它对我需要的一些效果非常有效，但是 CSS3 Pie 的 known issues 之一是布局，更具体地说是 CSS3 Pie makes top margins disappear 在应用它的元素中，我只在 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>

我们非常感谢您的解决方案和建议。谢谢你。

【参考方案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>