css - 为什么 chrome 每次加载 iframe 时都会将 iframe 的高度增加 10px？

Question

<button class="btn btn-success" id="opener" onclick="ValidateReport('<%=generatecampaign%>','<%=loading_img_path%>','<%=IS_HTML%>','Campaign_Report');">Preview</button>

上面是我的预览按钮

以下是我的 iframe，它在 iframe 中加载一些 html 并使用将在 iframe 中加载的 html 文件中的数据调整 iframe 的大小

<div class="bordercolor" id="mydiv" style="display: none; text-align: center">

    <IFRAME SRC="" id="reportpreview"  style="text-align: center; clear:both;"
        marginheight="0" frameborder="0" onLoad="sizeFrame();"></iframe>
        <iframe id="myIFrm" src="" style="display: none;"> </iframe>
</div>

上面是我的 iframe，它加载 html 文件并根据 html 文件内容调整 iframe 内容的大小...当没有 html 文件时，只需加载一个标签名称为“No”的静态 html 文件数据可用"

我的问题是当我使用 chrome 并且当我想加载 html 文件时..它会自动增加 iframe 10pt 的高度。连续按下预览按钮。但是为什么当我尝试调整 iframe 高度时它不清除以前的高度值...

以下是我在 javascript 中调用 iframe onLoad 的 sizeFrame() 函数

function sizeFrame() {

    var F=null;
     F = document.getElementById('reportpreview');
    if(F.contentDocument) {
        F.height=0;
    F.height = F.contentDocument.documentElement.scrollHeight+10; //FF 3.0.11, Opera 9.63, and Chrome
    } else {


        F.height=0;
    F.height = F.contentWindow.document.body.scrollHeight+10; //IE6, IE7 and Chrome

    }

    }

Answer 1

使用 css 重置并重置 iframe 的值。
类似于 iframe{ margin:0 padding:0 height:0 width:0}。我以前有过噩梦般的经历，其中 web-kit 浏览器添加了几个 px 来为滚动条腾出空间。从那时起，我开始在我的元素中使用适当的 css-reset，即使它增加了开销。