如何让Firefox与IE在Flexbox布局中正确渲染writing-mode？

我之前也碰到过类似的场景——想让子元素的百分比垂直边距基于父容器高度计算，而不是浏览器默认的宽度。你用的writing-mode技巧在Chrome里确实能正常工作，但Firefox和IE11对writing-mode与Flex布局的组合支持有不少坑。

先重现你的问题场景和代码：

<style>
* { margin: 0; padding: 0; border: 0; box-sizing: border-box; }
.container-vert { background-color: lightcyan; writing-mode: tb-lr; writing-mode: vertical-lr; display: flex; flex-flow: row nowrap; }
.container-vert > * { writing-mode: lr-tb; writing-mode: horizontal-tb; display: inline-block; vertical-align: bottom; opacity: .8; }
.c11 { background-color: lightcoral; }
.c12 { background-color: lightgreen; }
.outer1 { background-color: red; }
.outer2 { background-color: gold; }
.parent { display: flex; border: 1px dashed; background-color: lightblue; padding: 10px; flex-flow: row nowrap; margin-bottom: 10px; writing-mode: tb-lr; writing-mode: vertical-lr; }
.child { border: 1px solid; padding: 10px; min-width: 100px; writing-mode: lr-tb; writing-mode: horizontal-tb; }
</style>
<p class="outer1">Before first example</p>
<div class="container-vert">
 <div class="c1 c11">Child1-1 element
 <p>next line</p>
 <p>next line</p>
 <p>next line</p>
 <p>next line</p>
 </div>
 <div class="c1 c12">Child1-2 element
 <p>2nd's next line</p>
 </div>
</div>
<p class="outer1">After first example</p>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<p class="outer2">Before second example</p>
<div class="parent">
 <div class="child">A</div>
 <div class="child">B</div>
 <div class="child">C</div>
 <div class="child">D</div>
 <div class="child">E</div>
</div>
<p class="outer2">After second example</p>

各浏览器表现：

• Chrome 76.0.3809.100：显示正常
• Firefox 68.0.2：渲染异常
• IE 11 & Edge 44.18362.267.0：渲染异常

针对这个问题，有几个可行的修复方案：

方案1：放弃writing-mode技巧，改用CSS变量+动态计算（最稳定的跨浏览器方案） #

这个方法不需要依赖writing-mode，直接通过CSS变量关联容器高度，再用calc()计算子元素的百分比边距，完美兼容Chrome、Firefox和IE11。

实现代码： #

/* 父容器定义高度变量 */
.parent {
  --parent-height: 300px; /* 可以根据实际需求固定，或者用JS动态赋值 */
  height: var(--parent-height);
  display: flex;
  border: 1px dashed;
  background-color: lightblue;
  padding: 10px;
  flex-flow: row nowrap;
  margin-bottom: 10px;
}

/* 子元素基于父容器高度计算边距 */
.child {
  border: 1px solid;
  padding: 10px;
  min-width: 100px;
  /* 这里的10%对应你要的垂直边距比例 */
  margin-top: calc(var(--parent-height) * 0.1);
}

/* 第一个示例的容器同理 */
.container-vert {
  --container-height: 400px;
  height: var(--container-height);
  background-color: lightcyan;
  display: flex;
  flex-flow: row nowrap;
  align-items: flex-end; /* 替代原来的vertical-align: bottom */
}
.container-vert > * {
  opacity: .8;
  margin-top: calc(var(--container-height) * 0.1);
}

如果容器高度是动态变化的（比如内容撑开），可以用几行JS实时更新变量：

// 监听容器高度变化，更新CSS变量
function updateContainerHeight(containerSelector) {
  const container = document.querySelector(containerSelector);
  if (container) {
    container.style.setProperty('--container-height', `${container.offsetHeight}px`);
  }
}

// 初始化和窗口 resize 时更新
updateContainerHeight('.container-vert');
updateContainerHeight('.parent');
window.addEventListener('resize', () => {
  updateContainerHeight('.container-vert');
  updateContainerHeight('.parent');
});

方案2：针对Firefox/IE调整writing-mode与Flex的组合（仅适配原有技巧） #

如果一定要保留writing-mode的思路，可以针对Firefox和IE的特性做调整：

针对Firefox的修复： #

Firefox在处理writing-mode + Flex时，对flex项的display属性和对齐逻辑有特殊处理，你可以：

1. 移除子元素的display: inline-block，因为Flex布局下子元素默认是block，设置inline-block会干扰布局
2. 用Flex的对齐属性（align-items）替代vertical-align，后者在Flex布局中不生效

修改后的CSS：

.container-vert {
  background-color: lightcyan;
  writing-mode: vertical-lr;
  display: flex;
  flex-flow: row nowrap;
  align-items: flex-end; /* 替代vertical-align: bottom */
}
.container-vert > * {
  writing-mode: horizontal-tb;
  opacity: .8;
  /* 移除display: inline-block和vertical-align */
}
.parent {
  display: flex;
  border: 1px dashed;
  background-color: lightblue;
  padding: 10px;
  flex-flow: row nowrap;
  margin-bottom: 10px;
  writing-mode: vertical-lr;
  align-items: flex-start; /* 显式设置对齐方式 */
}
.child {
  border: 1px solid;
  padding: 10px;
  min-width: 100px;
  writing-mode: horizontal-tb;
}

针对IE11的修复： #

IE11对writing-mode和Flex的组合支持非常差，几乎没有完美的修复方式。如果你的项目必须兼容IE11，强烈建议使用方案1，或者直接放弃这种布局思路，改用静态的边距值。

方案3：改用Grid布局（如果场景允许） #

如果你的布局可以用Grid替代Flex，Grid在处理容器维度关联上更灵活，虽然默认情况下百分比margin还是基于宽度，但结合CSS变量的思路同样能实现需求，而且Grid在IE11中也有部分支持（需要加前缀-ms-）。

示例代码：

.parent {
  --parent-height: 300px;
  height: var(--parent-height);
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (100px)[auto-fill];
  grid-template-columns: repeat(auto-fill, 100px);
  gap: 10px;
  border: 1px dashed;
  background-color: lightblue;
  padding: 10px;
  margin-bottom: 10px;
}
.child {
  border: 1px solid;
  padding: 10px;
  margin-top: calc(var(--parent-height) * 0.1);
}

内容的提问来源于stack exchange，提问作者manikanta