Question

美好的一天。

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

它对我需要的一些效果非常有效，但是CSS3 Pie的CSS3 Pie之一是布局，更具体地说是应用它的元素中的known issues，我只有这样的问题到目前为止，在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>

赞赏解决方案和建议。谢谢。

Answer 1

我在centerContainer div周围使用了一个包装器div，并将包装器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>

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

1 个答案: