旧版Flexbox的基线对齐

Question

为网站构建灵活套件，而且新品种非常棒 - 完全符合预期。因为我们使用wkhtmltopdf渲染为PDF，但看起来我们需要支持遗留（webkit- *）flexbox一段时间了。

我已经汇总了以下代码来演示这个问题：

<style>
    .item {
      -webkit-box-align:baseline;
      margin:5px;
    }

    .wrapper {
      display:-webkit-box;
/*    display:flex;
      align-items:baseline; */
    }
</style>

<div class='wrapper'>
  <div class='item' style="width:50px;">LOOK:</div>
  <div class='item' style="width:200px;">Here's a box <div style="display:inline-block; vertical-align:-15px; height:50px; width:50px; border:1px solid black;"></div> and a bunch of text.</div>
</div>

当我使用注释（更新式）CSS而不是webkit- *版本运行它时，我得到了我对基线对齐的期望：

但是，运行上面的代码，在Chrome或（因为它使用旧的webkit引擎）QtWeb，我得到这个：

我知道旧的标准有点狂野西部，所以完全有可能这是预期的，但我觉得很奇怪，“基线”和“开始”在所有情况下给出相同的对齐方式我已经测试过，所以在我放弃之前我以为我会检查 - 我是否错误地使用旧标准进行基线对齐？

谢谢大家的帮助。

Answer 1

由于-webkit-box-align是灵活容器属性，请将其添加到wrapper规则

.wrapper {
  display:-webkit-box;
  -webkit-box-align:baseline;
}