我正在尝试为紧凑型表格创建一个旋转的标题,并且它在Chrome浏览器中工作正常,但在Firefox中无法正常工作。
代码:
div {
display: flex;
align-items: stretch;
}
span {
border-left: 1px solid black;
writing-mode: vertical-lr;
transform: rotate(200deg);
display: inline-flex;
align-items: center;
padding: 0;
white-space: nowrap;
width: 35px !important;
}
<div>
<span><b>Hello</b> world</span>
<span><b>Foo</b> bar</span>
</div>
在Chrome(和Edge)中,我得到:
在Firefox中,我得到:
如果我将align-items: center
取出,则在所有浏览器中都会得到相同的行为,但显然会失去对齐:
我想我可以用padding来破解它,但我宁愿知道它在做什么以备将来参考。