javascript - 为什么我的 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);
}

whole code可以在 SourceForge.net 上找到。生成的 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>

再一次:我没有任何换行符或 <br/>该 DOM 中的标记。它实际上只是一个 DIV 和一个直接子 IFRAME。就是这样。

但是，当我检查 IFRAME 和它的 DIV 容器的大小时，我注意到高度不同。我有两个显示 DIV 和 IFRAME 尺寸的屏幕截图。我们可以看到 DIV 比 IFRAME 高 4 个像素(见右下角的布局。)

DIV 中的这些额外像素有什么原因吗？当我在 Firebug 中动态更改 IFRAME 的高度时，DIV 也会更改其高度:IFRAME 高度 + 4。

Answer 1

添加

display:block;

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