Как решить проблему исчезновения верхних полей в элементе при использовании CSS3 Pie в IE7 - PullRequest
Новая
       9

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

3 голосов
/ 26 декабря 2011

Добрый день.

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

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

1 голос
/ 28 декабря 2011

Я использовал div-обертку вокруг div centerContainer и установил div-обертку на верхний отступ, равный тому же значению div-top centerContainer на полях. 

<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>
...