Question

iframe下方的间隙始终是边框宽度的两倍。在Firefox或IE中不会发生此问题。

Chrome screenshot

* {
    margin: 0px;
    padding: 0px;

    /* Make box sizes include the border, which is more convenient in most cases */
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}

div {
    border-style: solid;
    border-width: 10px;
}

iframe {
    display: block;
    width: 100%;
    height: 100%;

    border-style: dashed;
}

#frame_container {
    position: absolute;
    top: 50px;
    bottom: 0px;
    width: 100px;
}

<!doctype html>
<head>
    <link rel="stylesheet" type="text/css" href="test.css">
</head>

<body>
    <div id="frame_container">
        <iframe></iframe>
    </div>
</body>

将iframe放置在100％宽度/高度div中可以很容易地解决。

我猜这是一个错误，但有人有解释或优雅的CSS解决方案吗？

Edit1：box-sizing似乎是问题的一部分。这是没有它的截图：

Chrome screenshot

不幸的是（预期）会扰乱边界定位。

Answer 1

我不确定为什么Chrome表现得很笨拙......但如果有人对解决方法感兴趣，那么你可以使用calc()

Demo

html, body {
    height: 100%;
}

* {
    margin: 0px;
    padding: 0px;

    /* Make box sizes include the border, which is more convenient in most cases */
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}

div {
    border-style: solid;
    border-width: 10px;
    top: 50px;
    position: absolute;
}

iframe {
    display: block;
    width: 100%;
    height: 100%;    
    border-style: dashed;
}

#frame_container {
    width: 100px;
    height: 100%;
    height: calc(100% - 50px);
}

在带有边框的绝对div内的iframe下方的Chrome差距

1 个答案: