jQuery 函数在 Chrome 中不起作用：/答案

【问题标题】：jQuery Function Won't Work In Chrome :/jQuery 函数在 Chrome 中不起作用：/
【发布时间】：2010-09-17 11:20:14
【问题描述】：

谁能帮我解决这个问题？代码 zip 在这里：（链接已关闭）

我已使一切有效，但 Chrome 仍然计算元素的高度完全错误（每 10 次中有 9 次...）...

嗯，从技术上讲确实如此。

$(document).ready(function() {
            function resizeIt() {
                var extDiv = $('#externalWrapper').height();
                var wrapper1 = $('#wrapper1').height();
                var wrapper2 = $('#wrapper2').height();
                var wrapper3 = $('#wrapper3').height();

                $('#wrapper1-mid').css({'height':extDiv - ($('#wrapper1-top').height()+$('#wrapper1-bottom').height())-4});
                $('#wrapper2').css({'marginTop':extDiv-wrapper2});
                $('#wrapper3-mid').css({'height':extDiv -($('#wrapper3-top').height()+$('#wrapper3-bottom').height())+1});

                if($('ul#related-linklist > li').size() > 15) {
                    $('#spacer').attr({'height':(wrapper2-250)});
                    $('#product-image').css({
                        'marginTop':0,
                        'marginLeft':0
                    });
                }
            }
            resizeIt();
        });

这就是我的代码，在 Chrome 中它根本不会正确调整边距/高度。但在 Safari 中运行良好..

IE/Firefox 不受影响。

【问题讨论】：

您运行的是哪个版本的 Chrome？
我的Chrome版本是：6.0.472.53

标签： jquery google-chrome webkit

【解决方案1】：

更新：您是正确的，不需要在值的末尾添加“px”。但我已经更新了下面的代码以使用window.load，因为我认为这可能是问题所在。

当使用css 时，您应该在末尾包含px。另外，你有一个height 属性，它应该是css（这是未经测试的）：

$(window).load(function() {
        function resizeIt() {
            var extDiv = $('#externalWrapper').height();
            var wrapper1 = $('#wrapper1').height();
            var wrapper2 = $('#wrapper2').height();
            var wrapper3 = $('#wrapper3').height();

            $('#wrapper1-mid').css({'height':extDiv - ($('#wrapper1-top').height()+$('#wrapper1-bottom').height())-4 + 'px' });
            $('#wrapper2').css({'marginTop':extDiv-wrapper2 + 'px' });
            $('#wrapper3-mid').css({'height':extDiv -($('#wrapper3-top').height()+$('#wrapper3-bottom').height())+1 + 'px' });

            if($('ul#related-linklist > li').size() > 15) {
                $('#spacer').css({'height':(wrapper2-250) + 'px' });
                $('#product-image').css({
                    'marginTop':0,
                    'marginLeft':0
                });
            }
        }
        resizeIt();
    });

【讨论】：

嘿，谢谢你的代码，恐怕仍然没有改变 - 另外，我的印象是'px'并不是真的需要？
如果你省略 'px'，jQuery 会为你添加它
px（或其他单位）在 CSS 中是必需的，除非该值为零。需要 px 的原因是因为还有其他几个可能的单位，CSS 和 JQuery 都无法确定您的意思。
我了解您的合同问题，但您能在 jsFiddle 上发布一个演示吗？
在查看文件之后，我认为问题正在发生，因为图像没有加载。尝试将document.ready 切换为window.load。而且您不需要在末尾添加“px”是正确的。

【解决方案2】：

你的 jsFiddle 链接中的 HTML 有点乱，这可能是你问题的根源。

您有几个未关闭的<img> 元素，顶部有一个额外的<html>，还有几个共享相同ID 的元素。您还有一个 <div> 嵌套在 <span> 中，这是无效的。

http://infohound.net/tidy/ 是一个用于验证和清理 HTML 的有用工具。

【讨论】：

是的，我知道，我已经整理好了 - 我说 JSFiddle 无法工作，因为我无法释放所有的 HTML（并且我已经整理出了自闭合标签现在也是）
如果没有演示问题的示例，很难实际诊断它。它不需要是完整的页面，但仍然显示问题的示例子集是必要的。
在不损害客户机密性的情况下，我尽可能多地添加了 HTML...
没有 CSS，甚至没有对所需行为的描述，很难说出你想要发生什么。当我使用您提供的代码时，它正在调整 div 和边距。它可能没有按照你的意思做，但我无法预测那是什么。
更新的问题包括下载我的文件 - 所有图像和名称都已被审查

【解决方案3】：

我注意到，在 Chrome 中，有时位置有点偏离，这很可能是因为 WebKit 渲染引擎。我过去为解决这个问题所做的只是嗅探 Chrome 并向任何受影响的对象（“chrome”或“webkit”或其他东西）添加一个自定义类，然后编写特定于这些对象的代码。

诚然，这个想法很糟糕，但如果你现在需要它，这是一个可行的解决方法/hack。

【讨论】：