Internet Explorer CSS width: calc()

Question

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

I've got a problem with IE, when i've got 3 divs with background-image in 1 row and everyone has width: calc(100% / 3); .

If you resize a window, third image blinks.

When you resize the window to big resolution like .banner-mini has at least width:2000px; , then third image dissapears totally.

I've also implemented browser prefixes - you can see in Fiddle.

Has anybody please any idea, how I could fix that? Thank you so much!

Btw: Other browsers are allright.

Answer 1

A little and easy workaround for this is to reduce the width by 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 has not very precise rounding (you can find more info about this here ), you should subtract some unnoticeably small value from result to fix this:

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

Live fiddle: https://jsfiddle.net/keaukraine/L9duvu9q/1/

Answer 3

IE is still a bit messy on rounding value.

Consider a calc(99.9% / 3) to solve your problem.