CSS "calc" 函数在 Internet Explorer 11 中无法正常工作

Question

我的网页需要在 Chrome 等现代浏览器中工作，但也需要在 IE11 等较旧的浏览器中工作。

大部分都有效，但是当我尝试使用 calc (left: calc(50% - 40px);) 将按钮放在父容器 div 的中间时，它在 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
}

要记住的另一件事是固定位置将相对于浏览器 window 定位元素，而不是它的包含元素（除非包含元素是浏览器 window :) .

CSS "calc" 函数在 Internet Explorer 11 中无法正常工作

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

html

css

internet-explorer

sass

cross-browser