如何让 Firefox 和 IE 在 flexbox 布局中正确呈现写作模式？
Posted
技术标签:
【中文标题】如何让 Firefox 和 IE 在 flexbox 布局中正确呈现写作模式？【英文标题】：How can I get Firefox & IE to render writing-mode properly in a flexbox layout? 【发布时间】：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 【参考方案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 没错。谢谢你的评论。我想添加相同的。以上是关于如何让 Firefox 和 IE 在 flexbox 布局中正确呈现写作模式？的主要内容，如果未能解决你的问题，请参考以下文章
如何让 HTML 5 输入 type="date" 在 Firefox 和/或 IE 10 中工作
如何让 Firefox 中的 javascript 也能在 IE 中运行
如何让firefox和chrome支持css自定义鼠标样式？IE中用“cursor:url()”属性可以实现，FF、Chrome怎么弄？
无法让跨域 getJSON 调用在 Internet Explorer 上运行，在 Firefox 上运行良好，在 IE 和 Firefox 的单个域上运行