Chrome打印PDF时，缩小inline-block元素宽度致多页问题排查

问题重现代码 #

HTML代码

<html lang="en">
<head>
    <title>Document</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div>test</div>
</body>
</html>

CSS代码

body {
    box-sizing: border-box;
    margin: 0;
}

div {
    display: inline-block;
    border: 2px solid red;
    height: 100vh;
    width: 100vw; /* 改为小于100vw时PDF会生成两页 */
}

@page {
    margin: 0;
}

问题原因 #

核心问题出在div的display: inline-block属性上：
inline-block元素会保留HTML结构中元素前后的空白字符（比如代码里div标签后的换行），这些空白会被渲染成一个空格。当div宽度设为100vw时，这个空格会被挤到视口外，Chrome的PDF渲染引擎不会触发分页；但把div宽度改小后，空格宽度加上div宽度会超过100vw，导致页面横向溢出，Chrome的PDF打印功能会将溢出部分判定为需要新页面，最终生成两页。

解决方法 #

方法1：将div的display改为block

block元素会独占一行，不受HTML空白字符影响，设置任意小于100vw的宽度都不会触发横向溢出：

div {
    display: block; /* 替换inline-block */
    border: 2px solid red;
    height: 100vh;
    width: 90vw; /* 自定义宽度 */
}

方法2：清除HTML中的空白字符

把body内的代码写成无空白的形式（实用性较低，代码格式化易重新引入空白）：

<body><div>test</div></body>

方法3：给body设置font-size: 0

空白字符的宽度由字体大小决定，将body的font-size设为0可消除空格，再在div内重置字体大小：

body {
    box-sizing: border-box;
    margin: 0;
    font-size: 0; /* 消除空白字符宽度 */
}

div {
    display: inline-block;
    border: 2px solid red;
    height: 100vh;
    width: 90vw;
    font-size: 16px; /* 重置字体大小 */
}

方法4：使用flex布局

给body设置flex布局，子元素不会受空白字符影响：

body {
    box-sizing: border-box;
    margin: 0;
    display: flex; /* 添加flex布局 */
}

div {
    border: 2px solid red;
    height: 100vh;
    width: 90vw;
}

内容的提问来源于stack exchange，提问作者user32882