IE8 ve IE9: önce ve: öğeleri mutlak olduktan sonra gizli

Question

Düğmeyi esnek bir boyutta tutmak için her iki uçta "kapaklar" ve yinelenen arka plan içeren bir düğme oluşturmaya çalışıyorum. Bunu yapmak için

, ben (negatif değerler kullanılarak) ana düğmenin arka plan kaplı alanın dışına almak için position:absolute birlikte CSS'deki :before ve :after sözde elemanları, kullandık.

FF ve Chrome'da çalışır, ancak IE8 ve 9'daki gibi görünüyor, görüntüler var, ancak düğmenin "dışında" ve dolayısıyla gizli. Bu sözde-elemanların düğmenin nasıl “dışarı” açılacağını bilen var mı?

HTML'yi sadece<button></button> öğesinde tutmak ve SASS kullanıyorum. Birisi getirir önce, bu sözde elemanları < IE8'de çalışmadığını biliyoruz ve bir yarattık, sadece sidenote

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

: http://jsfiddle.net/Dqr76/8/ veya aşağıdaki kodu: Burada bir jsFiddle görebilirsiniz Bu sorun, bu sorunu etkilemiyor.

Answer 1

Düğme öğesine overflow: visible; ekleyin ve görünür. Bu jsFiddle

Bunu daha önce denedim, ama sanırım değil. Thanks to this question