为什么Chrome在打印时会在缩放元素中引入额外空间?

时间:2015-01-22 03:13:57

标签: html css google-chrome printing

在Chrome中,当缩小div时,事情看起来很好,直到我点击打印。单击打印后,会在随机位置添加额外的空格。如果空间位于文本内部,则它将是一条线的高度,或者如果它在图像之前被引入,则它将与图像的高度相同。

我有一个简单的例子,它只是div中的文本。首先,这个例子看起来是正确的;但在单击打印后,打印预览会在第二段中添加一个空格,该空格在打印对话框关闭后保留。

此行为不会在Firefox或IE中出现。

示例:http://jsfiddle.net/5tovueyt/1/

HTML代码:

<a href="javascript:window.print();">Print</a>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis molestie, mi vitae tincidunt posuere, est lorem dictum dolor, et sollicitudin leo felis at mauris. Ut finibus rutrum leo, vel tristique purus maximus a. Curabitur vitae lacinia lacus, at ornare neque. Integer ut fringilla libero. Donec tristique quam eget diam convallis, vitae sollicitudin lectus malesuada. Vestibulum euismod at ligula ut malesuada. Praesent tempor, dui vitae semper imperdiet, risus arcu auctor ligula, in commodo quam metus in eros. Sed non nibh a lorem auctor congue sit amet sed mauris. Sed molestie ullamcorper lacinia. Praesent pharetra felis mollis orci consequat, et dapibus purus condimentum.
<br><br>
Maecenas lobortis elit eu eleifend facilisis. Ut quis facilisis lorem. Integer dapibus lectus nec turpis vehicula posuere. Vestibulum mattis ac nisi sed dictum. Fusce placerat massa sit amet urna lacinia, vitae posuere turpis hendrerit. In blandit, orci mattis rhoncus elementum, arcu dui elementum nisi, at luctus urna mi non leo. Nulla ullamcorper et leo ut bibendum. Praesent et lectus sapien.
</div>

CSS:

div {
    font-size: 48pt;
    transform: scale(0.25);
    transform-origin: 0 0;
    width: 2000px;
}

点击打印前:

Before clicking print

点击打印后:(额外的空格用红色突出显示)

enter image description here

有谁知道为什么会这样?这是Chrome中的错误吗?反正有没有阻止这种情况发生?

0 个答案:

没有答案