Html CSS"；“计算”；函数不'；在Internet Explorer 11中无法正常工作

我的网页需要在Chrome等现代浏览器上运行，但也需要在IE11等旧浏览器上运行

大部分是有效的，但是当我试图在容器的中间放置一个按钮，父代码< > div <代码>使用<代码> Calc（左边：Calc（50% -40Px）；）它将不能在IE11中工作，而是将放在父容器的外面。p> 以下是我的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;
  }
}

---

以上将在现代浏览器中工作，代码< >按钮>代码>将在 ButoPosivs/Cuth>的中间，但它将在IE11的外部。p> 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
}

---

要记住的另一件事是，“位置固定”将相对于浏览器窗口定位元素，而不是相对于其包含的元素（除非包含的元素是浏览器窗口：）.

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
}

---

要记住的另一件事是，“位置固定”将相对于浏览器窗口定位元素，因此不会相对于其包含的元素（除非包含的元素是浏览器窗口：）。

您确定这是CSS吗？我问这个是因为CSS。可能他使用预处理，我使用SASS。你确定这是CSS吗？我问这个问题是因为CSS。可能他使用了预处理，我使用了SASS。在IE11中测试过，它确实有效，但只有当你把

转换

属性放在

左

属性上方时。。？这太疯狂了！用供应商前缀更新了我的答案，请再试一次！另外，请忽略我的最新编辑，我在您更新答案时发布了它。它起了作用，

-ms transform

似乎完成了这个技巧，这很奇怪，因为IE11不（不应该）需要供应商前缀。在IE11中测试了这一点，它确实有效，但仅当您将

变换

属性置于

左侧

属性上方时才有效。。？这太疯狂了！用供应商前缀更新了我的答案，请再试一次！另外，忽略我的最新编辑，我在你更新答案时发布了它。它起了作用，而且

-ms transform

似乎完成了这个技巧，这很奇怪，因为IE11不（不应该）需要供应商前缀。