如何让 Firefox 和 IE 在 flexbox 布局中正确呈现写作模式？答案

【问题标题】：How can I get Firefox & IE to render writing-mode properly in a flexbox layout?如何让 Firefox 和 IE 在 flexbox 布局中正确呈现写作模式？
【发布时间】：2019-12-24 11:08:43
【问题描述】：

我在 Flex 框中使用 writing-mode: vertical-lr。该布局在 Chrome 76 中正常工作，但在 Firefox 68 和 IE11 中完全错误。

要求说明：对于特定场景，我需要%垂直边距wrto容器（即父元素）高度而不是宽度（这是浏览器的实际行为）。我正在使用的技巧是，为容器设置writing-mode: vertical-lr，以便子级的% 垂直边距（例如：margin-top: 10%） 将根据容器高度而不是宽度计算。我为孩子们申请了writing-mode: horizontal-tb，让他们看起来很正常。

演示代码： （在 Firefox 或 IE 11 中运行以下代码，或查看下面的屏幕截图）

* {
  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;
}

<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>

是否有任何已知的修复方法可以让 Firefox 和 IE 正确呈现？

Chrome 76.0.3809.100：

火狐 68.0.2：

IE 11 和 Edge 44.18362.267.0：

【问题讨论】：

请在问题本身中包含minimal reproducible example，而不是仅链接到可以并且最终会改变/死亡的场外位置。
@TylerH 添加了可运行代码 sn-p。
历史记录，Codepen 链接：codepen.io/manikantag/pen/jONrjBK

标签： css google-chrome internet-explorer firefox flexbox

【解决方案1】：

您可能会以一种过于复杂的方式来做您想做的事情。如果您想根据高度获得垂直边距，您可以简单地将一个空的 div 与 height: X%;" 放在一起模拟边距。请记住，要使百分比正常工作，层次结构中的所有尺寸标注也应该以百分比为单位（Chrome 有时可能会在不是正常行为时添加额外的规则来标注“良好”的尺寸，所以我自己不会将我的样式基于 Chrome仅）。

* {
  margin: 0; padding: 0; border: 0; box-sizing: border-box;
}

.margin {
  height: 10%;
  background-color: yellow;
}

.container {
  height: 40%;
}

<html style="height:100%">
  <body style="height:100%">
    <div class="margin"></div>
    <div class="container" style="background-color: red;">BOO</div>
    <div class="margin"></div>
    <div class="container" style="background-color: blue;">BOO</div>
  </body>
</html>

另一种不需要额外 div 的解决方案。 注意：这可能不是一个更简单的解决方案，因为此处的边距高度（::before）是.container div 的百分比（50% 的 20% 为 10%），因此容器height 必须在其自身高度中包含边距。

* {
  margin: 0; padding: 0; border: 0; box-sizing: border-box;
}

.margin::before {
  content: "";
  display: block;
  height: 20%;
  background-color: yellow;
}

.container {
  height: 50%;
}

<html style="height:100%">
  <body style="height:100%">
    <div class="margin container" style="background-color: red;">BOO</div>
    <div class="margin container" style="background-color: blue;">BOO</div>
  </body>
</html>

【讨论】：

我已经尝试过间隔元件解决方案。但是在制作动画时遇到了负上边距的问题。此外，伪元素在 Flex 中使用时不会将元素推开，并且在 JS 中无法访问它们。在仅尝试了这两种解决方案之后，我正在摆弄writing-mode。感谢任何方式

【解决方案2】：

您可以尝试使用以下代码（不使用写作模式，只使用 Flexbox 布局）：

<style>
    * {
        margin: 0;
        padding: 0;
        border: 0;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }


    .container-vert {
        background-color: lightcyan;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-flow: row nowrap;
        flex-flow: row nowrap;
        flex-direction: column;
        width: 125px;
        max-width: 125px;
    }
    .c11 {
        background-color: lightcoral;
    }

    .c12 {
        background-color: lightgreen;
    }


    .outer1 {
        background-color: red;
    }

    .outer2 {
        background-color: gold;
    }


    .parent {
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        border: 1px dashed;
        background-color: lightblue;
        padding: 10px;
        flex-flow: row nowrap;
        margin-bottom: 10px;
        width: 125px;
        max-width:125px;
    }

    .row {
        width: auto;
        border: 1px solid blue;
    }

    .child {
        background-color: lightblue;
        border: 1px solid;
        padding: 10px;
        /*   margin: 10px; */
        min-width: 100px;
    }
</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="row">
        <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>
</div>
<p class="outer2">After second example</p>

在IE浏览器中的结果如下：

【讨论】：

虽然答案修复了 IE 上的显示（顺便说一下在 Firefox 上），但它禁用了 OP 选择 flex 和 writing-mode 的最初原因，即具有 % top 和底部边距基于容器的高度而不是其宽度。在您的解决方案中，这些边距基于宽度。
@Kaddath 没错。谢谢你的评论。我想添加相同的。