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

我使用了大量的CSS3特效，并且在使用IE7和8时，在CSS3 Pie的帮助下渲染出相同的效果时出现问题。

它非常适用于一些我需要的效果，但是CSS3派的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>

解答和建议表示赞赏。谢谢。

来源

2011-12-26 Fábio Antunes

我在centerContainer div上使用了一个wrapper div，并将wrapper div设置为等于margin-top centerContainer div的相同值的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-28 13:08:27

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

回答

相关问题