Я пытаюсь создать кнопку с "заглавными буквами" на любом конце и повторяющемся фоне, чтобы сохранить размер кнопки.

Для этого я использовал:before а также:after псевдо-элементы в CSS, наряду сposition:absolute чтобы получить его за пределами фонового пространства основной кнопки (с использованием отрицательных значений).

Он работает в FF и Chrome, но, похоже, в IE8 и 9 изображения есть, но "снаружи" кнопка, и, следовательно, скрыты. Кто-нибудь знает, как вытолкнуть эти псевдоэлементы & quot; out & quot; кнопки, чтобы они рендерились?

Я хочу сохранить HTML вjust <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: "";
    }
}

Just a sidenote, before someone brings it up, I know that these pseudo-elements do not work in < IE8, and have created a work-around that is not effecting this problem.