表格单元格中 iframe 底部的奇怪“填充”效果答案

【问题标题】：strange "padding" effect at the bottom of an iframe in a table cell表格单元格中 iframe 底部的奇怪“填充”效果
【发布时间】：2013-05-26 19:25:12
【问题描述】：

通过下面的代码，我试图达到以下设计：
1. 表格宽度/高度必须为浏览器窗口的 80%/70%。其左侧单元格的宽度必须为 40%。
2. 右侧单元格中的 iframe 必须填满所有可用空间，并且不能超出单元格的内边界。

<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title></title>
<style>
    body {width:100%}
    iframe {width:100%; overflow:auto; margin:0px; border:solid 2px red; background-color:white; -moz-box-sizing:border-box; box-sizing:border-box}
    table {width:80%}
    table, td {margin:0px; padding:0px; border:solid 1px black}
</style>
<script src="jquery.js"></script>
</head>
<body>
    <table>
        <tbody>
            <tr>
                <td style="width:40%">Cell 1</td>
                <td style="background-color:blue">
                    <iframe src='iframe.htm'></iframe>
                </td>
            </tr>
        </tbody>
    </table>
<script>
    $(window).load(function() {
        $('iframe').height($(window).height()*0.7);
    });
</script>
</body>
</html>

问题：
1. iframe 底部的蓝色“填充”空间是从哪里来的？如何强制它永远不出现？
2. 是否可以在没有以下情况下实现此设计： a) 使用 javascript； b) 使用 CSS box-sizing 属性？

【问题讨论】：

标签： javascript jquery css iframe

【解决方案1】：

iframe 是“内联框架”的缩写，内联元素位于周围文本的基线上。基线允许下行（'g' 的尾部等），空白是下行所占用的空间（即使没有）。

在iframe 上设置display: block; 应该可以修复填充。

编辑：这里是an updated version of @syedmohsin's jsFiddle，它摆脱了box-sizing，并为您解决了80% width/70% height问题。

CSS

html, body {
    width:100%;
    height: 100%;
}
iframe {
    display:block;
    overflow:auto;
    border:solid 2px red;
    width: 100%;
    height: 100%;
    margin:0;
}
table {
    width:80%;
    height: 70%;
}
table, td {
    margin:0px;
    padding: 0px;
    border:solid 1px black;
}
td {
    height: 100%;
    padding: 0 3px 2px 0;
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
    td {
        padding: 0 3px 0px 0;
    }
}
@media screen\0 {
    td {
        padding: 0 3px 0px 0;
    }
}

【讨论】：

是的，那是我的匆忙，我忘记了行高和内联元素交互......现在我想知道如何摆脱box-sizing:border-box......如果我使用有什么注意事项这个设计有这个属性吗？
我认为使用box-sizing 应该没问题，我相信所有浏览器都支持您需要工作的位（将边框移到iframe 的框内）。如果你真的不想使用它，这里有一个fixed up version of @syedmohsin's fiddle，它使用一些特定于浏览器的技巧来添加额外的填充以适应边框。

【解决方案2】：

iframe 被视为内联元素，因此表格单元格将其与基线对齐（并为下降者留出一点空间）。您可以使用内嵌图像看到类似的效果。

在iframe 上设置display: block ...或在td 上设置line-height: 0

【讨论】：