CSS calc（）操作在Edge浏览器上无法正常工作

Question

我在页面上有一个3列元素

<main>
    <aside class="left-sidebar"></aside>
    <section class="main-content"></section>
    <aside class="right-sidebar"></aside>
</main>

并具有以下CSS规则：

main {
    display:flex;
    flex-wrap:wrap;
    margin-left: -20px;
}

main > * {
    margin-left: 20px;
}

aside.left-sidebar {
    max-width: 320px;
    width: calc(25% - 20px);
}

.main-content {
    width: calc(100% - 800px);
    margin: 0 auto;
    padding-top: 65px;
    max-width: 1200px;
}

aside.right-sidebar {
    max-width: 400px;
    width: calc(25% - 20px);
}

这在Chrome和Firefox上可以正常运行，但在Microsoft Edge上却不能，有什么丢失吗？

我在Edge上检查DevTools时注意到的一件事是它将反转 calc（）函数的操作，因此它将代替width: calc(25% - 20px);并将其转换为{{1 }} 不确定这是否是罪魁祸首，结果是否与我想的相同。

更新：忘记包括在列上设置了最大宽度，并且当屏幕大小为calc(-20px + 50%)时调用max-width:100%的情况。

Answer 1

不应该使用的可能的解决方法

这似乎仅是百分比宽度的问题，而不是视口宽度单位（vw）。这是不应该使用的解决方法：

body {
  margin: 0;
}

main {
  display: flex;
  flex-wrap: wrap;
  height: 100vh;
}

aside.left-sidebar {
  background: red;
  max-width: 100%;
  width: calc(25vw - 20px);
}

.main-content {
  background: green;
  max-width: 100%;
  width: calc(50vw - 20px);
  margin: 0 20px;
}

aside.right-sidebar {
  background: blue;
  max-width: 100%;
  width: 25vw;
}

<main>
  <aside class="left-sidebar"></aside>
  <section class="main-content"></section>
  <aside class="right-sidebar"></aside>
</main>

---

您应该使用什么

由于您使用的是flex，use flex：

• 第一列和第三列被赋予flex: 1
• 中心列被赋予flex: 2
• 将左右边距放在中心列上
• 可以为列指定单独的最大宽度
• 没有给出宽度

这为您提供了相同的比率，无需使用calc。

示例

注意：我已删除了正文的默认边距，并给定了主100vh，因此在此示例中它具有高度。

body {
  margin: 0;
}

main {
  display: flex;
  flex-wrap: wrap;
  height: 100vh;
}

aside.left-sidebar {
  background: red;
  flex: 1;
  max-width: 320px;
}

.main-content {
  background: green;
  flex: 2;
  max-width: 1200px;
  margin: 0 40px;
}

aside.right-sidebar {
  background: blue;
  flex: 1;
  max-width: 400px;
}

<main>
  <aside class="left-sidebar"></aside>
  <section class="main-content"></section>
  <aside class="right-sidebar"></aside>
</main>