CSS calc() 在 wkhtmltopdf 0.12.4 中无法工作

Question

我正在使用wkhtmltopdf 0.12.4（带有修补的qt）（使用node js）来生成我的HTML预览PDF文件。 这个工具完美地运行。

<div style="width: 20%;);>
   Test Element
</div>

但这在wkhtmltopdf中不起作用（在其他浏览器中可以正常工作）。

<div style="width: calc(100% / 5);width: -webkit-calc(100% / 5);>
   Test Element
</div>

是否有针对css3 calc()函数的解决方案？ 我的wkhtmltopdf版本是否支持它？

- Chandrakant

---

顺便问一下，为什么你不使用 width: 20%; 而是用 calc()..? - Rohit Sharma

一个行中的元素数量不固定，有时候是2、3、4或者10个。 如果元素数量为8，则宽度为：calc(100% / 8)。 如果我想使用宽度为20%，我会在CSS文件中使用它，而不是内联样式！ - Chandrakant

据我所知，calc()不是CSS3标准，而是一个实验性的函数！ - xander

这取决于你如何生成HTML字符串，或者它来自哪里？如果你无法影响HTML的生成，你仍然可以使用正则表达式循环或其他方法简单地将calc(100% / 5)替换为20％。 - xander

@xander 从技术上讲，这是一个“候选推荐”，但是它已经被每个主要的浏览器支持了很长时间。https://developer.mozilla.org/en-US/docs/Web/CSS/calc这远非最新的css。那更多的是用于变量之类的东西。即使在桌面浏览器中，也可以在IE中使用。 - csga5000

Answer 1

你可以使用 flex 属性。 我考虑到应该至少有两个 div，每个都具有 width:50%。 如果您将更多具有相同宽度的 div 添加到 flexRow 中，它将自动调整。如果一行中只有一个 div 的可能性，则更新 flexChild width 为 100%。 这样可以完美地工作。

.flexRow{
  display:flex;
  width:100%;
  padding:15px;
  background-color:red;
  height:100px;
}
.flexChild{
  display:block;
  background-color:#000;
  width:50%;
  border:1px solid #fff;
}

<div class="flexRow">
  <div class="flexChild"></div>
  <div class="flexChild"></div>
  <div class="flexChild"></div>
  <div class="flexChild"></div>
</div>

- the_mishra

---

这个 flex 的东西对我没用。还有一些内联 CSS 计算要处理……类似于 left: calc((100% / 5 / 2) - 11px)。 - Chandrakant

Answer 2

我在我的项目中使用SCSS，看起来让它在另一个变量中进行数学运算是有效的，就像这样（同时使用函数），这在HTML页面和渲染的WKHTMLTOPDF报告中都有效。

$line-height: 1.5;
$font-size: 1rem;

@function min-lines-height($lines) {
    @return $font-size * $line-height * $lines;
}

.two-lines {
  min-height: min-lines-height(2);
}

.three-lines {
  min-height: min-lines-height(3);
}

- qdev