jQuery 在 Chrome 中的 div.height 方法有误，如何使所有的 div 高度相同？

Question

我使用了以下代码来使 rightpos，leftpos 和 middlepos 这三个 div 具有相等的高度：

<script>

    jQuery.noConflict();
    jQuery(document).ready(function($){

        // Find the greatest height:
        maxHeight = Math.max($('#rightpos').height(), $('#middlepos').height());
        maxHeight = Math.max(maxHeight, $('#leftpos').height());

        // Set height:
        $('#rightpos').height(maxHeight);
        $('#middlepos').height(maxHeight);
        $('#leftpos').height(maxHeight);

    })
</script>

使用这种方法确定 http://yaskawa.ir/ 主页上最高的 div 在 Firefox 中效果良好，但在 Chrome 中存在问题。

---

更新1：在Sparky672的回答后：

我可以看到，使用这段代码，结尾处的alert('test here');无法运行。

<script>
    jQuery.noConflict();
    //jQuery(document).ready(function($){});

    jQuery(window).load(function($){

        // Find the greatest height:
        maxHeight = Math.max($('#rightpos').height(), $('#middlepos').height());
        maxHeight = Math.max(maxHeight, $('#leftpos').height());

        // Set height:
        $('#rightpos').height(maxHeight);
        $('#middlepos').height(maxHeight);
        $('#leftpos').height(maxHeight);

        alert('test here');
    })
</script>

- Mohammad Naji

---

我在Chrome中看到所有的div高度都相同。问题出在哪里？ - Kedume

我正在Linux中使用Chromium，它出现了问题。我现在会上传图片。 - Mohammad Naji

请在 jsFiddle 上构建您的问题。window.load 在这里运行正常：http://jsfiddle.net/snBLP/3/ - Sparky

Answer 1

尝试使用window.load()代替document.ready()，以确保在计算高度之前加载所有资产。

jQuery(window).load(function($){

文档:

当一个元素及其所有子元素完全加载完成时，将向该元素发送load事件。可以向与URL相关联的任何元素发送此事件: 图像、脚本、框架、iframe 和 window 对象。

http://api.jquery.com/load-event/

查看演示:

http://jsfiddle.net/snBLP/3/

- Sparky

---

谢谢@Sparky672，但是它没有起作用，似乎这损坏了我的代码。最后的alert不起作用。 - Mohammad Naji

@smhnaji，我的答案中没有什么异常之处。请在此页面向下滚动并查看第一个示例代码。你能否构建一个jsFiddle演示来展示你的问题？ - Sparky

非常奇怪的是，在使用jQuery(window).load时，我发现$无法正常工作（与document.ready完全相反，后者可以与$一起使用并且代码相同），不管怎样，我用你的解决方案来代替了$。具体示例可参见http://yaskawa.ir/的主页。 - Mohammad Naji

Answer 2

$(document).ready() 不适合计算高度。$(document).ready() 不会等待图像加载完成等操作。

我建议尝试使用

$(window).ready() 

相反地...

- rnirnber

---

请问Sparky能否把我的分数还给我？我个人使用了$(window).ready()...它和$(window).load()一样好。 - rnirnber

你可能认为它运行得很好，但实际上这完全不同，而且你的答案与 document.ready 没有太大区别。再次阅读 .ready() 的文档...“指定一个函数，在DOM完全加载后执行。”而.load()则是“当元素及其所有子元素已经完全加载时发送到一个元素”。 - Sparky