Функция CSS «calc» не работает должным образом в Internet Explorer 11

Question

Моя веб-страница должна работать в современных браузерах, таких как Chrome, а также в старых браузерах, таких как IE11.

Большая часть этого работает, но когда я пытаюсь поместить кнопку в середину родительского контейнера div, используя calc (left: calc(50% - 40px);), он не будет работать в IE11 и вместо этого будет помещен за пределы родительского контейнера.

Вот мой код CSS:

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

Выше будет работать в современных браузерах, где .button будет в середине buttonContainer, но в IE11 он будет снаружи.

Answer 1

IE может быть немного сложнее с использованием calc. Решением было бы установить left в 50% и затем использовать преобразование для корректировки ширины кнопки, например:

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

Еще одна вещь, которую нужно иметь в виду, это то, что фиксированная позиция будет позиционировать элемент относительно окна браузера, а не содержащего его элемента (если только содержащий элемент не является окном браузера:).