在 FireFox 的 iFrame 中显示内容时的 jQuery 高度问题

Question

我正在制定一个日历/时间表，它需要休息时间才能跨越包含事件的整个高度。下面的代码在 FF/Chrome 和 IE 中运行良好。在 Firefox 中通过 iFrame 加载内容时会出现问题，高度始终设置为零。只有重新加载 iFrame 时，页面才会正确显示。

here is DEMO

$(window).load(function () {
    $(".event").each(function () {
        var height = $(this).height();
        $(".note, .break").each(function () {
            $(this).height(height);
        });
    });
})

我正在为 FF 寻找一致的解决方案或解决方法，以便在 iFrame 的首次加载时正确应用高度。

提前致谢。

Answer 1

方式 1：用 div 包裹你的 iframe 得到 float:left;并在fireforx上计算div的高度。

尝试计算这个 div 的高度，而不是 iframe 的..

<div style="float:left">
    <iframe></iframe>
</div>

.load() usage

方式2：

$(document).ready(function () {//if u wont define more specific element, use docment ready
    $(".event").each(function () {
        var height = $(this).height();
        $(".note, .break").each(function () {
            $(this).css('height':height+'px');//to change css height
            //$(this).attr('height',height);//to change inline attr height
        });
    });
})