如何解決在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時元素上邊距的消失

回答

相關問題