IE8 и IE9 :before и :after абсолютная позиция элементов скрыты

Я пытаюсь создать кнопку с «заглавными буквами» на обоих концах и повторяющимся фоном, чтобы кнопка оставалась неизменной. гибкий размер.

Чтобы сделать это, я использовал псевдоэлементы :beforeи :afterв CSS вместе с position:absolute, чтобы получить его. за пределами пространства, покрытого фоном основной кнопки (с использованием отрицательных значений).

Работает в FF и Chrome, но похоже на IE8 и 9, изображения есть, но находятся "снаружи" кнопки, а потому скрыты. Кто-нибудь знает, как вытолкнуть эти псевдоэлементы «из» кнопки, чтобы они отображались?

Я хочу, чтобы HTML был простоэлементом , и я использую 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: "";
    }
}

Просто примечание, прежде чем кто-то поднимет этот вопрос, я знаю, что эти псевдоэлементы не работают в