CSS "calc" function doesn't work as expected in Internet Explorer 11

Question

My webpage needs to work in modern browsers such as Chrome but also on older browsers such as IE11.

Most of it works but when I try to put a button in the middle of the container parent div using calc (left: calc(50% - 40px);) it will not work in IE11 and will instead be placed outside of the parent container.

Here is my CSS code:

.buttonContainer {
  position: fixed;
  width: 336px;
  height: 62px;
  background-color: #fff;
  display: inline-block;
  text-align: center;
  vertical-align: middle;
  margin-bottom: 10px;
  box-shadow: 0 0 2px 0 #d2d2d2;
}

.button {
  position: fixed;
  left: calc(50% - 40px);
  .color {
    background-color: #ff0033;
    color: #ffffff;
    display: inline-block;
    height: 26px;
    width: 64px;
    margin-top: 10%;
    padding: 8px 16px;
    font-size: 14px;
    cursor: pointer;
    text-align: center;
    vertical-align: middle;
    line-height: 28px;
  }
}

Above will work in modern browsers where .button will be in the middle of buttonContainer, but it'll be on the outside of it in IE11.

Are you sure this is CSS? I ask this because CSS [nesting selectors isn't possible in CSS](https://stackoverflow.com/a/4564922/10415695). — Malekai, May 17 '19 at 07:00

Sjors · Accepted Answer · 2019-05-17T07:05:47.553

2

IE can be a bit hard with using calc. A solution would be to set left to 50% and then use a transform to correct the width of the button, like this:

.button {
    left: 50%;
    -moz-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);  // -50% of the width of the button
}

Another thing to keep in mind is that position fixed will position the element relative to the browser window, so not to it's containing element (unless the containing element is the browser window :).

edited May 17 '19 at 07:05

answered May 17 '19 at 06:56

Sjors

1,205
1
8
24

Tested this in IE11, it does work but only if you put the `transform` property above the `left` property..? This is madness! – Malekai May 17 '19 at 07:01
Updated my answer with vendor prefixing, try it again please – Sjors May 17 '19 at 07:02
Sure! Also, ignore my latest edit, I posted it right as you updated your answer. – Malekai May 17 '19 at 07:03
It worked and `-ms-transform` seems to have done the trick, which is weird given that IE11 doesn't (shouldn't) require vendor prefixes. – Malekai May 17 '19 at 07:07

CSS "calc" function doesn't work as expected in Internet Explorer 11

1 Answers1