[css]iframe铺满全屏会出现滚动条的问题

问题RT

解决方案

方法一： 文档声明改成HTML 4.01 Transitional 标准的。
方法二： vertical-align:top（经测验text-bottom,text-top,baseline以外的值都可以）
方法三： font-size:0忽略行高是否包含基线高度的影响。把基线高度设置为0

其实是dtd模式对空隙的解读不同导致了方法一的成功。

本质解析

【一句话点透】
行内替换元素包括：iframe,input,textarea,img,OBJECT 等。
非表单控件类行内替换元素就应该指的是iframe,object和img等。
滚动条的出现是看行框高度是否超过了父元素的高度。而非表单控件类行内替换元素的父元素的行高，在不同文档声明中，未必包含基线的高度。有可能预留出来基线高度，导致父元素与行内替换子元素之间存有空隙。
以iframe为例，当iframe的高度设置为100%时，父元素还要预留出基线的高度，所以实际内容高度就会为calc(100% - x)，x>0，自然就出现了滚动条。

那为什么vertical-align:top就可以了?父框的行高是基于字体尺寸计算出一个 "合理" 的值。该高度会受到vertical-align的影响。

疑惑

我觉得这个问题还是没解释透彻？
为什么是行高而不是高度？
滚动条到底是判断行高超出，还是判断内容超出，还是什么？
父框的行高和父框的高度什么关系？

参考链接

1. html5 vertical spacing issue with
2. 在不同的文档模式中，当唯一的非表单控件类行内替换元素存在于其包容块中时，其父框的行高并不一定会计算文本基线高度