css3pieスタイリングエラー - 何も表示しない

Question

私はcss3pieを使用してIE8サポートを大幅に増やすWebページを作成しています。ページには、最新のブラウザで見栄えの良い「アップロード」ボタンと「ダウンロード」ボタンがあります。

IE8でcss3pieと表示されると、のようになります。は、（まだ影が欠けています）、または少なくともそれは慣れていました。私はChromeを使用している間にたくさんの編集を行い、IE8に戻って確認しました。大ミス。

はどこか、それらの編集の途中で、私はcss3pieを破った、と私はそれを修正すると考えることができますが、私はちょうどそれを把握することはできませんすべてを試してみた...

それかもしれませんに戻しても、ボタンは<div>タグではなく、<span>タグではありません（有効なHTMLにするために変更しました）。

あなたは何が間違っているのか、また、該当する場合、今後どのように避けることができるかご存知ですか？

IE8の失敗：それはややどのように見えるか

：

（トップと白のテキストの影で白いステーキも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); 
} 

Answer 1

私はあなたの問題は、ここで説明したのzインデックスの問題である疑いがある：相対的な可能性が高いそれを修正します：http://css3pie.com/documentation/known-issues/#z-index

ショートストーリーが位置を追加することです。