旧版弹性盒的基线对齐

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;
}