figure元素自动出现滚动条问题求助：导出PDF时滚动条无法消除

嘿，我来帮你搞定这个PDF导出时figure元素带垂直滚动条的糟心问题！

你遇到的情况其实是PDF渲染引擎和浏览器对HTML/CSS的处理逻辑不一样——浏览器导出HTML时会自动处理元素溢出，不会显示不必要的滚动条，但PDF工具的渲染机制更“死板”，哪怕只有一丢丢内容超出容器，就会触发滚动条。

这里有几个简单的CSS调整，能彻底解决这个问题：

• 给figure加上overflow: hidden属性，直接强制隐藏所有溢出内容的滚动条，这是最核心的修复点
• 别给figure设置固定高度，让它根据内部的图片和figcaption自动撑开高度，从根源避免内容溢出
• 可选：给figure加个margin: 1em auto，让整个figure块在页面里居中，同时增加上下间距，视觉上更舒服

修改后的完整代码如下：

CSS代码

figure { 
  display: block; 
  overflow: hidden; /* 关键：隐藏溢出内容的滚动条 */
  margin: 1em auto; /* 可选：让figure整体居中，增加上下间距 */
}
figure img{ 
  max-width: 70%; 
  height: auto; 
  display: block; 
  margin-left: auto; 
  margin-right: auto; 
}
figcaption { 
  color: #9BB4BC; 
  text-align: center; 
  font-style: italic; 
  font-size: 1em; 
}

HTML代码

<figure>
 <img src="https://i.imgur.com/RGLj3oV.jpg" />
 <figcaption>Hello</figcaption>
</figure>

如果试了上面的方法还不行，可以试试这两个额外的小技巧：

• 给figure添加line-height: 0，有时候figcaption的默认行高会和图片之间产生微小的间距，导致PDF渲染时误判为溢出
• 把图片的max-width改成100%，让图片完全适配figure的宽度，避免横向溢出间接引发纵向滚动条

内容的提问来源于stack exchange，提问作者Sjoerd van Hoof