Как решить исчезновение верхних полей в элементе при использовании CSS3 Pie в IE7

Question

Добрый день.

Я использую много эффектов CSS3, и у меня возникают проблемы с отображением тех же эффектов в IE 7 и 8 с помощью CSS3 Pie.

Это работает очень хорошо для некоторых эффектов, которые мне нужны, однако один из макета known issues из CSS3 пирог, более конкретно 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> 

Решения и предложения приветствуются. Спасибо.

Answer 1

Я использовал обертку div вокруг центра div и установил обертку div на верхнюю часть, равную тому же значению div-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>