Strange issue with background image and border-radius in IE11

Question

Here is test link: http://bybyweb.com/cafe-vert/ . Problem: In IE11 there is strange empty (?) space at the right hand side of 'product box': "PERDEZ PLUS DE 10KG etc,etc...." - part (green box and 3 white boxes at the left hand side). It seems that background image doesn't 'stretch' to container width (container width changing doesn't solve problem).

In Firefox and Chrome, all looks perfect.

Relevant code: HTML

<div class="product-box first-box">
<h4>PERDEZ PLUS DE 10KG - Achetez 3 MOIS et obtenez 2 gratuitS! </h4>
</div>
<div class="product-box ">
<h4>PERDEZ entre 5 et 10 kg - Achetez 2 MOIS et obtenez 1 gratuit! </h4>
</div>
<div class="product-box ">
<h4>PERDEZ ENTRE 3 ET 5 KG - ACHETEZ 1 MOIS DE CURE!</h4>
</div>
<div class="product-box ">
<h4>DERNIÈRE CHANCE !! - Achetez 1 MOIS et obtenez 1 gratuit! </h4>
</div>

CSS:

.product-box {
    width:598px;
    height:210px;
    border:1px solid #0b7564;
        background-position:center top;
border-radius:7px;
    margin:0 auto;
    -webkit-box-shadow: 2px 7px 15px -10px rgba(112,108,112,1);
-moz-box-shadow: 2px 7px 15px -10px rgba(112,108,112,1);
box-shadow: 2px 7px 15px -10px rgba(112,108,112,1);
margin-bottom:23px;
background-image:url(../images/product-bar.png);
background-position:top;
background-repeat:no-repeat;

 background-clip:border-box;
}

I guess it is related to border-radius using, but, i can't find IE (11, and probably lower versions) fix... Thanks in advance!

Answer 1

可能不是最好的答案，但是将.product-box的宽度设置为597px似乎对我来说很干净。