使用jQuery计算高度在Firefox和Chrome中不同 [英] Calculating height using jQuery differs in Firefox and Chrome

查看:304
本文介绍了使用jQuery计算高度在Firefox和Chrome中不同的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我有一个问题,这里,但提供的解决方案不工作。问题是,我使用jQuery height()函数返回一个div的高度。它在Firefox中工作得很好,但返回的值在Chrome中小于300px。

I have a question that was already asked here, but the solution offered there did not work. The problem is that I'm using the jQuery height() function to return the height of a div. It works nicely in Firefox, but returns a value that is 300px smaller in Chrome...

您可以看到此错误的示例在这里。虽然我必须说这是在希伯来语。虽然这不应该很重要...

You can see an example of this bug here. Though I must say it's in Hebrew. Though that shouldn't matter much...

有没有发生过这样的事?下面是计算高度的代码:

Has anyone had that happen before? Here's the code that calculates the height:

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

编辑:此问题不固定 / strong>在某种程度上我不喜欢,但它现在会做。这是我想出的解决方案:

This problem was not fixed but worked around in a way that I don't like, but it'll do for now. Here's the "solution" that I came up with:

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。我绝对不认为这是一个最佳的解决方案。

Since both Safari and Chrome run on WebKit, the browser.safari actually selects chrome as well..I definitely do not consider this an optimal solution.

谢谢!
Amit

Thanks! Amit

推荐答案

在Chrome中,div的高度不包括300像素高像sheli.jpg,因为它没有在html或css中的任何地方指定。如果您在< img>中指定 height =300标签或 height:300px; 作为其样式的一部分,它将工作。

In Chrome, the height of the div does not include the height of your 300-pixel tall image "sheli.jpg" because it isn't specified anywhere in the html or css. If you specify the height="300" in your <img> tag or height: 300px; as part its style, it will work.

这篇关于使用jQuery计算高度在Firefox和Chrome中不同的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆