css – JQuery div.height在Chrome中错误地使所有div的高度相同

前端之家收集整理的这篇文章主要介绍了css – JQuery div.height在Chrome中错误地使所有div的高度相同前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
对于rightpos,leftpos和middlepos div,我使用以下代码具有相等的高度:
  1. <script>
  2.  
  3. jQuery.noConflict();
  4. jQuery(document).ready(function($){
  5.  
  6. // Find the greatest height:
  7. maxHeight = Math.max($('#rightpos').height(),$('#middlepos').height());
  8. maxHeight = Math.max(maxHeight,$('#leftpos').height());
  9.  
  10. // Set height:
  11. $('#rightpos').height(maxHeight);
  12. $('#middlepos').height(maxHeight);
  13. $('#leftpos').height(maxHeight);
  14.  
  15. })
  16. </script>

使用这种方式确定http://yaskawa.ir/主页的最高div在Firefox中运行良好,但在Chrome中有问题.

Sparky672的回答后更新1:

我可以看到,使用这段代码,警报(‘test here’);最后不行.

  1. <script>
  2. jQuery.noConflict();
  3. //jQuery(document).ready(function($){});
  4.  
  5. jQuery(window).load(function($){
  6.  
  7. // Find the greatest height:
  8. maxHeight = Math.max($('#rightpos').height(),$('#leftpos').height());
  9.  
  10. // Set height:
  11. $('#rightpos').height(maxHeight);
  12. $('#middlepos').height(maxHeight);
  13. $('#leftpos').height(maxHeight);
  14.  
  15. alert('test here');
  16. })
  17. </script>

解决方法

尝试使用window.load()代替document.ready(),以确保在计算高度之前加载所有资源.
  1. jQuery(window).load(function($){

文档:

The load event is sent to an element when it and all sub-elements have
been completely loaded. This event can be sent to any element
associated with a URL: images,scripts,frames,iframes,and the
window object.

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

见演示:

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

猜你在找的CSS相关文章