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

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

Чтобы сделать это, я использовал псевдоэлементы :before и :after в CSS, а также 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, и создали рабочий процесс, который не влияет на эту проблему.

Ответ 1