IE8 e IE9: antes y después de que la posición absoluta de los elementos esté oculta

Question

Estoy intentando crear un botón con "mayúsculas" en cada extremo y un fondo repetitivo, para mantener el tamaño flexible del botón.

Con el fin de hacer esto, he utilizado el :before y :after pseudo-elementos de CSS, junto con position:absolute conseguirlo fuera del espacio de fondo cubierto del botón principal (utilizando valores negativos).

Funciona en FF y Chrome, pero parece que en IE8 y 9, las imágenes están ahí, pero están "fuera" del botón, y por lo tanto están ocultas. ¿Alguien sabe cómo hacer que estos pseudo-elementos salgan del botón, para que se procesen?

Quiero mantener el HTML en solo elemento <button></button>, y estoy usando SASS. Se puede ver un jsFiddle aquí: http://jsfiddle.net/Dqr76/8/ o el código de abajo:

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

Sólo una anotación al margen, antes de que alguien saca el tema, sé que estos pseudo-elementos no funcionan en < IE8, y han creado una solución de problemas que no está afectando a este problema.

Answer 1

Agregue overflow: visible; al elemento de botón, y se muestra. Demostrado en este jsFiddle

Juro que ya lo intenté, pero supongo que no. Thanks to this question