在 Firefox 和 Chrome 中使用 jQuery 计算高度有所不同
我有一个问题已经在此处提出，但那里提供的解决方案不起作用。问题是我使用 jQuery height() 函数返回 div 的高度。它在 Firefox 中运行良好，但在 Chrome 中返回的值小了 300px...
您可以查看此错误的示例 这里。但我必须说这是希伯来语。虽然这应该没什么关系......
以前有人发生过这种情况吗？这是计算高度的代码：
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..我绝对不认为这是一个最佳解决方案。
谢谢！ 阿米特
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);
EDIT: 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');
}
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.
Thanks!
Amit
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
在 Chrome 中，div 的高度不包括 300 像素高的图像“sheli.jpg”的高度，因为它没有在 html 或 css 中的任何位置指定。如果您在![]()
中指定
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 orheight: 300px;as part its style, it will work.如果是因为当时你的图像尚未加载，因此高度为 0。这解释了你在 Chrome 中遇到的高度不足。要解决这个问题，请将设置高度的代码放在
jQuery(window).load()中，如下所示：If is because your image at that time is not yet loaded, therefore the height is 0. That explains the height deficit you got in Chrome. To solve this problem, put the piece of code that set the height inside
jQuery(window).load()like this:根据贾斯汀和我在上面的评论中的讨论，将 jQuery 代码包装在 $(window).load() 中将允许该代码在图像完全加载后正确执行。
Per the discussion Justin and I had in the comments above wrapping the jQuery code in $(window).load() will allow this code to execute properly after the images have loaded completely.