internet-explorer-8 - IE8およびIE9：beforeおよび：after要素の絶対位置は非表示になっています

Question

ボタンを柔軟なサイズに保つために、両端に「キャップ」があり、背景が繰り返されているボタンを作成しようとしています。

これを行うために、CSSのと疑似要素を使用し:before、:afterメインposition:absoluteボタンの背景で覆われたスペースの外に配置しました（負の値を使用）。

FFとChromeで動作しますが、IE8と9のように見えますが、画像はそこにありますが、ボタンの「外側」にあるため、非表示になっています。これらの疑似要素をボタンの「外」にポップしてレンダリングする方法を知っている人はいますか？

HTMLを要素だけに留めておきたいので、<button></button>SASSを使用しています。ここでjsFiddleを見ることができます：http：//jsfiddle.net/Dqr76/8/または以下のコード：

button {
    display: inline-block;
    zoom: 1;
    *display: inline;
    border:0;
    background-image: url(../images/btn_bg.png);
    background-repeat: repeat-x;
    color: #fff;
    font-weight: bold;
    height: 22px;
    line-height: 22px;
    position: relative;
    margin: 0 5px;
    vertical-align: top;

    &:before {
        display: inline-block;
        height: 22px;
        background-image: url(../images/btn_left.png);
        width: 5px;
        position: absolute;
        left: -5px;
        top: 0;
        content: "";
    }

    &:after {
        display: inline-block;
        height: 22px;
        background-image: url(../images/btn_right.png);
        width: 5px;
        position: absolute;
        right: -5px;
        top: 0;
        content: "";
    }
}

ちなみに、誰かがそれを提起する前に、これらの疑似要素は<IE8では機能しないことを知っており、この問題に影響を与えない回避策を作成しました。