火狐浏览器的align-items与Rotate()

时间:2019-04-12 10:16:27

标签: css firefox flexbox cross-browser

我正在尝试为紧凑型表格创建一个旋转的标题,并且它在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)中,我得到:

enter image description here

在Firefox中,我得到:

enter image description here

如果我将align-items: center取出,则在所有浏览器中都会得到相同的行为,但显然会失去对齐:

enter image description here

我想我可以用padding来破解它,但我宁愿知道它在做什么以备将来参考。

0 个答案:

没有答案