这是测试链接: 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;
}
我猜它与border-radius使用有关,但是,我找不到IE(11,可能是更低版本)修复...提前谢谢!
答案 0 :(得分:1)
可能不是最佳答案,但将.product-box的宽度设置为597px似乎可以为我清理它。