宽度: calc()

Question

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

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

如果您调整了窗口的大小，第三个图像就会闪烁。

当你将窗口调整到像.banner-mini这样的大分辨率时，至少有width:2000px;，那么第三张图像就完全消失了。

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

有没有人知道，我怎么能解决这个问题？非常感谢!

顺便说一句:其他浏览器都可以。

Answer 1

解决这一问题的简单方法是将宽度减少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没有非常精确的四舍五入(您可以找到有关此这里的更多信息)，您应该从结果中减去一些不明显的小值，以修复以下问题：

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

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

Answer 3

在四舍五入的价值上还有点混乱。

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