CSS iframe 高度 100% 后出现纵向滚动条

现象

当设置了iframe高度100%，理想情况是没有纵向滚动条，但仍然出现了滚动条，设置99%后滚动条消失。

原始代码

<iframe src="1.pdf" width="100%" height="600px" style="border: none;">
</iframe>

原因

iframe默认是inline/inline-block行内元素，inline元素基线产生的底部缝隙引发纵向滚动条。

inline元素会参与文本基线（baseline）对齐，为了给字符下行（descender）预留空间，浏览器会在元素底部多留几像素空隙，当iframe高度正好是100%时，这几像素（通常3~`5px`）就会把父容器撑高从而触发纵向滚动条。

a A e：没有下行
g p y：有下行（descender）

a A e g p y

其他行内元素

• iframe
• img
• video
• audio
• canvas
• svg