私はcss3pieを使用してIE8のサポートを大幅に増やすWebページに取り組んでいます。このページには、「アップロード」ボタンと「ダウンロード」ボタンがあり、最新のブラウザで見栄えがします。
css3pieを使用するIE8では、見た目はほぼ同じです...（まだはめ込みシャドウがありません）または少なくとも以前はそうでした。Chromeを使用しながら多くの編集を行った後、IE8に戻って確認しました。大ミス。
それらの編集の途中で、私はcss3pieを壊し、それを修正するために考えられるすべてのことを試みましたが、私はそれを理解することができません...
それが機能したとき、ボタンが<div>タグではなく<span>タグに含まれていたことは何の価値もないかもしれません（私はそれを有効なHTMLにするために変更しました）が、元に戻すと<div>修正されません。
何が悪いのか、そして該当する場合は、将来それを回避する方法を知っていますか？
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);
}