为什么我的IFRAME不能与其容器DIV一对一？

Question

我使用jQuery创建一个弹出窗口，当弹出窗口包含路径时，我将一个IFRAME作为弹出窗口的内容。代码调整IFRAME的大小，以获取该IFRAME标记的父DIV中的整个可用空间。

相关代码如下所示：

jQuery("<div class='snap-popup' id='"
        + popup.id
        + "' style='position:fixed;display:none;'><div class='close-popup'>"
        + "</div><div class='inside-popup'><div class='popup-title'></div>"
        + "<div class='popup-body'></div></div></div>")
    .appendTo("body");
popup.widget = jQuery("#" + popup.id);
i = popup.widget.children(".inside-popup");
b = i.children(".popup-body");

[...snip...]

if(popup.path)
{
    b.empty();
    b.append("<iframe class='popup-iframe' src='" + popup.path + "' frameborder='0'"
            + " marginheight='0' marginwidth='0'></iframe>");
    f = b.children(".popup-iframe");
    f.attr("width", b.width());
    f.attr("height", popup.widget.offset().top + popup.widget.height()
                         - b.offset().top);
}

可以在SourceForge.net上找到whole code。生成的HTML看起来像这样（为了清晰起见，添加了换行符和缩进）：

<div class="snap-popup" id="create-finball" style="position: fixed;
      width: 500px; height: 300px; top: 27px; left: 390px; display: block;
      z-index: 3;">
  <div class="close-popup"></div>
  <div class="inside-popup">
    <div class="popup-title"></div>
    <div class="popup-body">
      <iframe class="popup-iframe" src="/finball/company/create"
          marginheight="0" marginwidth="0" frameborder="0"
          height="265" width="500"></iframe>
    </div>
  </div>
</div>

再次说明：我在该DOM中没有任何新行或<br/>标记。这真的只是一个DIV和一个直接的孩子IFRAME。就是这样。

然而，当我检查IFRAME的尺寸和它的DIV容器时，我注意到高度的差异。我有两个屏幕截图显示了DIV和IFRAME的尺寸。我们可以看到DIV比IFRAME高4个像素（参见右下角的布局。）

DIV中是否有任何额外像素的原因？当我动态更改Firebug中IFRAME的高度时，DIV也会更改其高度：IFRAME高度+4。

Answer 1

添加

display:block;

iframe的样式。 例 http://jsfiddle.net/U8skz/