IE11 中背景图像和边框半径的奇怪问题

Question

这里是测试链接： http://bybyweb.com/cafe-vert/。 问题： 在 IE11 中，“产品盒”右侧有一个奇怪的空 (?) 空间：“PERDEZ PLUS DE 10KG 等……” - 部分（左侧的绿色框和 3 个白框）。似乎背景图像没有“拉伸”到容器宽度（改变容器宽度不能解决问题）。

在 Firefox 和 Chrome 中，一切看起来都很完美。

相关代码：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;
}

我猜这与使用边框半径有关，但是，我找不到 IE（11，可能是更低版本）修复...提前致谢！

Answer 1

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