IE8 và IE9: trước và sau khi các phần tử vị trí tuyệt đối bị ẩn

Question

Tôi đang cố gắng tạo nút có "nắp" ở hai đầu và nền lặp lại để giữ nút có kích thước linh hoạt.

Để làm được điều này, tôi đã sử dụng :before và :after giả yếu tố trong CSS, cùng với position:absolute để có được nó ở bên ngoài không gian background-che nút chính (sử dụng giá trị âm).

Nó hoạt động trong FF và Chrome, nhưng có vẻ như trong IE8 và 9, hình ảnh ở đó, nhưng là "bên ngoài" nút và do đó bị ẩn. Có ai biết làm thế nào để bật các phần tử giả "ra" của nút, để họ sẽ render?

Tôi muốn giữ HTML thành chỉ yếu tố <button></button> và đang sử dụng SASS. Bạn có thể thấy một jsFiddle đây: http://jsfiddle.net/Dqr76/8/ hoặc mã dưới đây:

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

Chỉ cần một sidenote, trước khi ai đó mang nó lên, tôi biết rằng những giả yếu tố không làm việc trong < IE8, và đã tạo ra một xung quanh đó không ảnh hưởng đến vấn đề này.

Answer 1

Thêm overflow: visible; vào phần tử nút và hiển thị. Được trình bày tại số jsFiddle

Tôi thề là tôi đã thử điều đó rồi, nhưng tôi đoán là không. Thanks to this question