IE8 i IE9: przed i: po położeniu pozycji absolutnej są ukryte

Question

Próbuję utworzyć przycisk z "czapkami" na obu końcach i powtarzającym się tłem, aby przycisk był elastyczny.

W tym celu, Użyłem pseudo-elementy :before i :after w CSS, wraz z position:absolute aby ją poza tło pokryte przestrzeni główny przycisk (za pomocą wartości ujemne).

Działa w FF i Chrome, ale wygląda na to, że w IE8 i 9 obrazy są tam, ale są "na zewnątrz" przycisku i dlatego są ukryte. Czy ktokolwiek wie, jak wyskoczyć z pseudoelementów z przycisku, tak że będą renderować?

Chcę zachować kod HTML do tylko elementu <button></button> i używam SASS. Można zobaczyć jsFiddle tutaj: http://jsfiddle.net/Dqr76/8/ lub poniższy kod:

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: ""; 
    } 
} 

Wystarczy sidenote, zanim ktoś przynosi go, wiem, że te pseudo-elementy nie działają w < IE8 i stworzyli obejście, które nie wpływa na ten problem.

Answer 1

Dodaj overflow: visible; do elementu przycisku, a pojawi się. Pokazany pod tym numerem: jsFiddle

Przysięgam, że już próbowałem, ale nie sądzę. Thanks to this question