奇怪的 div 高度错误：webkit 或 jQuery bug？

Question

我有一个简单的网页应用程序，它有两个并排的浮动内容 div。

一小段 jquery 通过查看父 div 的高度并进行简单计算来设置这些 div 的高度

。这种方法在 Firefox 和 Firefox 中效果很好IE..它第一次在 Safari 和 Chrome 中也能工作...

但是当页面在 Safari 或 Chrome 中重新加载时..左右 div 会无缘无故地神奇地增加大约 200px 的高度。

进行一次硬刷新..div 高度恢复正常，

请指教！这很奇怪——

<div class="holder1"  > 

<!--      LEFT HAND BOX     --> 

<div id="left-box" class="half left"> 
<div class="info-box">  
<h2>Left Hand Content</h2>  


 ------------- Left content here----------------------

</div>  
</div> 

<!--      RIGHT HAND BOX     -->

<div id="right-box" class="half right" >
<div class="info-box">  
<h2>Right Hand Content</h2> 

 -------------Right content here----------------------      

</div>      
</div> 

<div class="clearfix"></div>    
</div> 

<!--    END RIGHT and LEFT BOXES    -->

<div>   more content here  </div>

     <script language="javascript"> 
            var new_height =  $('#left-box').closest('.holder1').height() -25;
            $('#right-box').find('.info-box').height(new_height);
        $('#left-box').find('.info-box').height(new_height);

    </script> 

Answer 1

你确定 DOM 是在 javascript 运行时构建的吗？
尝试

 <script type="text/javascript">
    $(function() {
        var new_height =  $('#left-box').closest('.holder1').height() -25;
        $('#right-box').find('.info-box').height(new_height);
        $('#left-box').find('.info-box').height(new_height);
    }
</script> 

Answer 2

试试这个，它对我有用：

 <script type="text/javascript">
    jQuery(function($){
        $('.holder1 > .half').each(function(){
            var height = 0, actual_height;
            var actual_height = $(this).height();
            if(actual_height > height){ height = actual_height; }
            $('.holder1 .info-box').height(height);
        });
    });
</script> 

Answer 3

感谢所有的想法..当我将 jQuery include 从 1.4 更新到 1.5 时，它似乎对我很有帮助..

这是一个适用于我在 FF、IE、Safari 和 Chrome 中的小提琴..

http://jsfiddle.net/bytKE/11/

Answer 4

我想我找到了解决方案。
我遇到了类似的问题，尝试根据父 DIV 高度（具有自动高度）更改 DIV（包含浮动 DIV）的高度。它在 IE 上运行得很好，但在 Chrome 上却不行。在 Chrome 中，父 DIV 甚至没有正确的高度，就像 Chrome 不将浮动 DIV 算作父 DIV 的一部分一样。

为了解决这个问题，我必须更改父 DIV 的样式，添加“float:left”以使其也“浮动”。
在您的 CSS 代码中，它将是：

.holder { border:red dotted 1px; float:left }

看，现在我们看到红色虚线父 DIV：http://jsfiddle。网/bytKE/46/

Answer 5

Webkit 在重新加载或刷新后无法检测元素高度的 jQuery 问题已经存在了一段时间。这些可能的解决方案值得尝试：

方法 1

尝试使用 jQuery(window).load 而不是 jQuery(document).ready，例如：

jQuery.noConflict();
jQuery(window).load(function() { // <--

    var myheight = jQuery(".mydiv").height();
    jQuery(".this-div-uses-calculated-height-as-padding").css( "padding-top", myheight ); 

});

来源

方法 2（超过 90%+ 的浏览器支持，但 IE8 不支持）

如果上述方法导致 Webkit 和其他浏览器之间出现一些问题，请考虑使用此方法：

document.addEventListener("DOMContentLoaded", function(event) { 
    // your script
});

来源

方法 3 （不是一个优雅的方法，但它在所有浏览器）

如果即使这样也不起作用，您可以尝试一种不太干净的方法，首先检测浏览器，然后应用依赖于脚本的浏览器（无论它是否是 webkit）：

jQuery.noConflict();

isWebkit = /(safari|chrome)/.test(navigator.userAgent.toLowerCase());

if (isWebkit){
    jQuery(window).load(function() { // <--            
         // your script    
    });
}

else{
    jQuery(document).ready(function() { // <--
        // your script
    });
}

另一种方法可能是确保包含任何 CSS 文件 < em>在包含 jQuery 文件之前。