Question

https://jsfiddle.net/dm7pxv1k/1/

我遇到了IE的问题，当我有3个div，背景图像在一行，每个人都有width: calc(100% / 3);。

如果调整窗口大小，则第三个图像闪烁。

当您将窗口大小调整为.banner-mini至少为width:2000px;的大分辨率时，则第三个图像完全消失。

我还实现了浏览器前缀 - 你可以在Fiddle中看到。

有谁有任何想法，我怎么能解决这个问题？非常感谢你！

顺便说一句：其他浏览器都没事。

Answer 1

一个简单易行的解决方法是将宽度减少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>

Answer 2

IE没有非常精确的舍入（你可以找到关于这个here的更多信息），你应该从结果中减去一些不明显的小值来解决这个问题：

width: calc(100% / 3 - 0.01px);

活小提琴：https://jsfiddle.net/keaukraine/L9duvu9q/1/

Answer 3

IE在舍入值方面仍然有点混乱。

考虑使用calc(99.9% / 3)来解决您的问题。

Internet Explorer CSS宽度：calc（）

3 个答案: