Ich versuche, einen Knopf mit "Großbuchstaben" an beiden Enden und einem sich wiederholenden Hintergrund zu erstellen, um die Knopfgröße flexibel zu halten.

Um dies zu tun, habe ich das benutzt:before und:after Pseudo-Elemente in CSS, zusammen mitposition:absolute um es außerhalb des Hintergrundbereichs der Hauptschaltfläche zu platzieren (mit negativen Werten).

Es funktioniert in FF und Chrome, aber es sieht aus wie in IE8 und 9, die Bilder sind da, befinden sich aber "außerhalb" der Schaltfläche und sind daher ausgeblendet. Weiß jemand, wie man diese Pseudoelemente "aus" der Schaltfläche entfernt, damit sie gerendert werden?

Ich möchte das HTML behaltengerade das<button></button> Element und verwende SASS. Sie können eine jsFiddle hier sehen:http://jsfiddle.net/Dqr76/8/ oder den Code unten:

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

Nur eine Randnotiz, bevor jemand darauf eingeht, weiß ich, dass diese Pseudoelemente in <IE8 nicht funktionieren und eine Problemumgehung erstellt haben, die dieses Problem nicht betrifft.