html - Flexbox wkhtmltopdf 渲染问题

Question

我有一个页面，我正在使用 wkhtmltopdf 将其转换为 pdf。我有一个 3 列布局，它在 Chrome 中运行良好，但 pdf 生成不正确。是否有 flexbox 的替代方案可以提供相同的 View 或使 flexbox 在 wkhtmltopdf 中工作的方法？ Modernizr 没有帮助。谢谢。

HTML:

<div class="header">
  <div id="name" class="center">
    <h2>
      Centered Text
    </h2>
  </div>
  <div id="links" class="left">
    <h3>
    Left Line 1
    <br>
    Left Line 2
    </h3>
  </div>
  <div id="contact" class="right">
    <h3>
    Right Line 1
    <br>
    Right Line 2
    </h3>
  </div>
</div>
</div class="clear"></div>

CSS:

.header {
  margin-top: 0;
  margin-bottom: 2px;
  display: flex;
  justify-content: space-between;
}

.center {
  order: 2;
  text-align: center;
}

.left {
  order: 1;
  float: left;
  text-align: left;
}

.right {
  order: 3;
  float: right;
  text-align: right;
}

.clear:before,
.clear:after {
  flex-basis: 0;
  order: 1;
}

.clear {
  clear: both;
}

Answer 1

wkhtmltopdf uses an old version of WebKit所以你必须使用 the original Flexbox spec ，远没有那么强大，但仍然可以一些相同的效果。

另请注意，您必须在许多属性前加上 -webkit- 前缀。