Internet explorer 8 IE8和IE9：隐藏元素位置绝对值之前和之后

我正在尝试创建一个两端都带有“大写”的按钮，并且有一个重复的背景，以保持按钮的灵活大小

为了做到这一点，我在CSS中使用了

：before

和

：after

伪元素，以及

position:absolute

，以使其超出主按钮的背景覆盖空间（使用负值）

它在FF和Chrome中工作，但看起来像在IE8和IE9中，图像在那里，但在按钮的“外部”，因此是隐藏的。有人知道如何将这些伪元素“弹出”按钮，以便渲染它们吗

我想将HTML保留为

元素，并使用SASS。 您可以在这里看到一个JSFIDLE:或下面的代码：

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

---

只是一个旁注，在有人提出它之前，我知道这些伪元素在添加

溢出：可见到按钮元素，它就会显示出来。
在这里演示

我发誓我已经试过了，但我想没有
 你知道吗？（请完成我的JSFIDLE示例，这样人们就可以乱搞代码了）感谢您指出这一点！我用一些虚拟图片更新了它，并在上面添加了一个链接，我们仍然需要JSFIDLE生成的新url：pYou说你知道IE7，而下面不知道伪元素，但是你对这些元素的CSS包括对IE7的一系列攻击（*display:inline，zooms）。你可以把它们去掉以增加清洁度。我把它们去掉了-谢谢！像老板一样解决自己的问题。：）+1.