CODEWITHSUNDEEP
htmlcssinternet-explorersasscross-browser
Arte2
Arte2

Reputation: 333

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

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.

Upvotes: 0

Views: 1350

Answers (1)

Sjors
Sjors

Reputation: 1215

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

Upvotes: 2

Related Questions