使用chrome来节省高度问题'另存为pdf'

Question

我有一个包含3个div的简单网页

.power-bar-3 {
    margin-bottom: 5px;
    position: relative;
    width: 150px;
    height: 3px;
    float: right;
    background-color: #bababa;
}
.power-force-3 {
    width: 63px; 
    height: 3px;
    float: left;
    background-color: #000000;
}

<div class="power-bar-3"><div class="power-force-3"></div></div>
<div class="power-bar-3"><div class="power-force-3"></div></div>
<div class="power-bar-3"><div class="power-force-3"></div></div>

来自chrome，我将网页保存为pdf文件，这是我得到的结果：

如您所见，在pdf文件中，div的高度不同。第一行和最后一行更薄。你知道为什么以及如何解决这个问题？感谢