我在 Flex 框内使用 writing-mode: vertical-lr。布局在 Chrome 76 中正常工作，但在 Firefox 68 和 IE11 中完全错误。
要求注意事项:对于特定场景，我需要 % 垂直边距 w.r.to container (即父元素) 高度而不是宽度 (这是浏览器的实际行为)。我使用的技巧是，为容器设置 writing-mode: vertical-lr，这样 % 垂直边距 (例如:margin- top: 10%) 的 child 将根据容器高度而不是宽度进行计算。我为 children 应用了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 和边缘 44.18362.267.0:
最佳答案
您可能已经采用了一种过于复杂的方式来做您想做的事情。如果你想要基于高度的垂直边距，你可以简单地放置一个空的 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>关于css - 如何让 Firefox 和 IE 在 flexbox 布局中正确呈现书写模式？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57553199/