Internet Explorer CSS 宽度: calc()

Question

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

我有一个IE浏览器的问题：当我在一行中有3个带有背景图片的div，并且每个div的宽度都是 width: calc(100% / 3);。如果你调整窗口大小，第三个图片会闪烁。

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

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

请问是否有任何想法，如何解决这个问题？非常感谢！

顺便说一句：其他浏览器都没有问题。

- Honzis Novák

---

查看IE设置的计算值。三个元素的总宽度肯定超过100％。 - Marcos Pérez Gude

Answer 1

一个小而简单的解决方法是将宽度减少1像素：

.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>

- Sebastian Brosch

---

1像素是可以察觉到的（对于3个元素来说总共是3像素），为了修复IE的四舍五入问题，只需减去0.01像素，这不会导致任何可见的渲染问题。 - keaukraine

Answer 2

IE的四舍五入不是非常精确（你可以在这里找到更多信息），你应该从结果中减去一些无法察觉的小值来修复这个问题：

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

实时演示: https://jsfiddle.net/keaukraine/L9duvu9q/1/

（注：此链接为一个技术演示页面）

- keaukraine

Answer 3

IE在处理四舍五入时有些混乱。

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

- romuleald