Question

Is there any solution for this problem? When using rounded-corner in IE9 with background picture (repeating by x) the background is standing out. Everything is OK in other browsers(without shadow!)

https://i.stack.imgur.com/XLIer.png

css:

 .green-button {
    display: inline-block;
    text-decoration: none;
    font-size: 14px;
    color: #ffffff;
    padding: 10px 20px;
    background: url(../img/buttons/green.gif) repeat-x left top;
    border-radius: 7px;
    -moz-border-radius: 7px;
    -webkit-border-radius: 7px;
        border: 3px solid #373843;

    text-shadow:
        0px 1px 0px rgba(000,000,000,0.7),
        0px 1px 0px rgba(255,255,255,0.3);
        cursor: pointer;

}

HTML:

<a href="#link" class="green-button"><span>Oh why</span></a>

Answer 1

i got it… background-clip: padding-box;