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); 它将转换为 calc(-20px + 50%)不确定这是否是罪魁祸首，但我认为结果是一样的。

更新:忘记包括在列上设置了最大宽度，当屏幕尺寸为 @media screen 时调用 max-width:100%和(最大宽度:1440 像素)。

Answer 1

不应使用的可能解决方法

这似乎只是百分比宽度的问题，而不是视口(viewport)宽度单位 (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。

例子

注意:我已经删除了 body 上的默认边距并给定了 main 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>