使用jQuery计算高度在Firefox和Chrome中有所不同

Question

我在这里已经提出了一个问题,但是那里提供的解决方案没有用.问题是我使用jQuery height()函数返回div的高度.它在Firefox中运行良好,但在Chrome中返回的值小于300px ...

你可以在这里看到这个bug的一个例子.虽然我必须说它是希伯来语.虽然那不应该太重要......

有人曾经发生过这种事吗？这是计算高度的代码:

var heightLeftCol = $('#leftCol').height();
var sidebarHeight = $('#sidebar').height();
var minHeight = heightLeftCol > sidebarHeight ? heightLeftCol : sidebarHeight; 
$('#postArea').css('min-height', minHeight+100);

编辑:这个问题没有修复,但以我不喜欢的方式解决,但它现在会做.这是我提出的"解决方案":

if (jQuery.browser.safari) {
    $('#postArea').css('min-height', minHeight+400 + 'px');
}
else {
    $('#postArea').css('min-height', minHeight+100 + 'px');
}

由于Safari和Chrome都在WebKit上运行,因此browser.safari实际上也选择了chrome ..我绝对不认为这是一个最佳解决方案.

谢谢!阿米特

Answer 1

在Chrome中,div的高度不包括300像素高图像"sheli.jpg"的高度,因为它未在html或css中的任何位置指定.如果您height="300"在<img>标签中指定或height: 300px;作为其样式的一部分,它将起作用.

Answer 2

如果是因为那时您的图像尚未加载,那么高度为0.这就解释了您在Chrome中获得的高度不足.要解决这个问题,请将设置高度的代码放入内部,jQuery(window).load()如下所示:

jQuery(window).load(function(){
     jQuery("#div1").css("height", jQuery("#div2").height());
});

Answer 3

根据讨论,Justin和我在上面的评论中将jQuery代码包装在$(window).load()中将允许此代码在图像完全加载后正确执行.