https://jsfiddle.net/dm7pxv1k/1/
我在IE中遇到问题，当我在一行中有3个具有背景图像的div且每个人都有时width: calc(100% / 3);。
如果调整窗口大小，则第三张图像闪烁。
当您.banner-mini至少将窗口调整为高分辨率时width:2000px;，第三张图像会完全消失。
我还实现了浏览器前缀-您可以在Fiddle中看到。
有人请问有什么想法，我该如何解决？非常感谢！
顺便说一句：其他浏览器都可以。
一个简单的解决方法是将宽度减少1px：
.banner-mini{
height: 220px;
width: 100%;
overflow: hidden;
}
.banner-mini .box{
float: left;
width: 33%; /** older browsers **/
width: -webkit-calc((100% / 3) - 1px); /** Safari 6, Chrome 19-25 **/
width: -moz-calc((100% / 3) - 1px); /** FF 4-15 **/
width: calc((100% / 3) - 1px); /** FF 16+, IE 9+, Opera 15, Chrome 26+, Safari 7 and future other browsers **/
height: 100%;
}
.banner-mini .fst{
background: url(http://s33.postimg.org/q43iabwtr/banner_1.jpg) no-repeat center center;
background-size: 100%;
}
.banner-mini .snd{
background: url(http://s33.postimg.org/tozdtk1db/banner_2.jpg) no-repeat center center;
background-size: 100%;
}
.banner-mini .trd{
background: url(http://s33.postimg.org/lkr9otey7/banner_3.jpg) no-repeat center center;
background-size: 100%;
}<div class="banner-mini">
<div class="box fst"></div>
<div class="box snd"></div>
<div class="box trd"></div>
</div>本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句