IE8和IE9:before和:after元素位置绝对隐藏

Question

我试图在两端创建一个带"帽子"的按钮,并重复背景,以保持按钮的灵活尺寸.

为了做到这一点,我使用了CSS中的:before和:after伪元素,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中不起作用,并创建了一个不影响这个问题的变通方法.

Answer 1

添加overflow: visible;到按钮元素,它会显示出来.在这个jsFiddle展示

我发誓我已经尝试过了,但我猜不是. 感谢这个问题