Próbuję utworzyć przycisk z „czapkami” na obu końcach i powtarzającym się tłem, aby zachować elastyczny rozmiar przycisku.

Aby to zrobić, użyłem:before i:after pseudoelementy w CSS wraz zposition:absolute aby uzyskać go poza obszarem tła głównego przycisku (używając wartości ujemnych).

Działa w FF i Chrome, ale wygląda jak w IE8 i 9, obrazy są tam, ale są „na zewnątrz” przycisku i dlatego są ukryte. Czy ktoś wie, jak wypchnąć te pseudoelementy z przycisku, aby je renderowały?

Chcę zachować HTML dowłaśnie <button></button> element i używam SASS. Możesz zobaczyć jsFiddle tutaj:http://jsfiddle.net/Dqr76/8/ lub poniższy kod:

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

Przede wszystkim, zanim ktoś to podniesie, wiem, że te pseudoelementy nie działają w <IE8 i stworzyły obejście, które nie wpływa na ten problem.