Ошибка стилизации css3pie - ничего не отображается - PullRequest
Новая
       29

Ошибка стилизации css3pie - ничего не отображается

0 голосов
/ 23 марта 2012

Я работаю над веб-страницей, которая использует css3pie, чтобы значительно увеличить поддержку IE8.Вы заметите, что на странице есть кнопки «Загрузить» и «Загрузить», которые хорошо выглядят в современных браузерах.

В IE8 с css3pie она выглядит почти как приятно ... (все еще не хватает вставных теней) или, по крайней мере, раньше.Я сделал много правок при использовании Chrome, а затем вернулся к IE8.Большая ошибка.

Где-то в середине этих правок я сломал css3pie, и я попробовал все Я могу придумать, чтобы это исправить, но я просто не могу понять это...

Может быть ничего не стоит, что когда он работал, кнопки содержались в тегах <div>, а не в тегах <span> (я изменил его, чтобы сделать его действительным HTML), хотя вернул его обратно на<div> не исправляет это.

Знаете ли вы, что не так, и если применимо, как я могу избежать этого в будущем?

Ошибка IE8:
IE8

Как это должно выглядеть примерно так:
Goal

(белый стейк сверху и белая тень текста не отображаются даже при работающей css3pie)

код CSS: 

span.button {
    behavior: url(/css/PIE/PIE.htc);
    display:inline-block;

    color:rgb(38,67,107);
    text-shadow: 0px 1px 0px #FFFFFF;
    font-family: 'Oswald', sans-serif;
    font-size: 140%;

    padding-top:1px;
    padding-bottom:3px;
    padding-left:10px;
    padding-right:10px;

    background-color:rgb(200,225,255);

    background-image: linear-gradient(bottom, rgb(185,209,250) 0%, rgb(200,225,255) 69%);
    background-image: -o-linear-gradient(bottom, rgb(185,209,250) 0%, rgb(200,225,255) 69%);
    background-image: -moz-linear-gradient(bottom, rgb(185,209,250) 0%, rgb(200,225,255) 69%);
    background-image: -webkit-linear-gradient(bottom, rgb(185,209,250) 0%, rgb(200,225,255) 69%);
    background-image: -ms-linear-gradient(bottom, rgb(185,209,250) 0%, rgb(200,225,255) 69%);
    -pie-background: linear-gradient(bottom, rgb(185,209,250) 0%, rgb(200,225,255) 69%);

    background-image: -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0, rgb(185,209,250)),
        color-stop(0.69, rgb(200,225,255))
    );

    border:1px solid rgb(120,140,180);
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;

    box-shadow: inset 0 2px 4px 0 #FFFFFF;
    -webkit-box-shadow: inset 0 2px 4px 0 #FFFFFF;
    -moz-box-shadow: inset 0 2px 4px 0 #FFFFFF;
}

span.button:hover {
    text-shadow: 0px 1px 0px rgb(242,242,242);
    background-color:rgb(190,213,242);

    background-image: linear-gradient(bottom, rgb(176,199,238) 0%, rgb(190,214,242) 69%);
    background-image: -o-linear-gradient(bottom, rgb(176,199,238) 0%, rgb(190,214,242) 69%);
    background-image: -moz-linear-gradient(bottom, rgb(176,199,238) 0%, rgb(190,214,242) 69%);
    background-image: -webkit-linear-gradient(bottom, rgb(176,199,238) 0%, rgb(190,214,242) 69%);
    background-image: -ms-linear-gradient(bottom, rgb(176,199,238) 0%, rgb(190,214,242) 69%);
    -pie-background: linear-gradient(bottom, rgb(176,199,238) 0%, rgb(190,214,242) 69%);

    background-image: -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0, rgb(176,199,238)),
        color-stop(0.69, rgb(190,214,242))
    );

    border:1px solid rgb(96,112,144);
}

span.button:active {
    box-shadow: inset 0 0 11px 0 rgba(0,0,0,0.2);
    -webkit-box-shadow: inset 0 0 11px 0 rgba(0,0,0,0.2);
    -moz-box-shadow: inset 0 0 11px 0 rgba(0,0,0,0.2);
    background-color:rgb(155,200,232);
}

1 Ответ

1 голос
/ 24 марта 2012

Я подозреваю, что ваша проблема связана с проблемой z-index, описанной здесь: http://css3pie.com/documentation/known-issues/#z-index

Короткая история о том, что добавление позиции: родственник, скорее всего, исправит это.

...