Question

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

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

这种方法在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

您确定在javascript运行时构建了DOM吗？尝试

 <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包括1.4到1.5时，它似乎有帮助。

这是一个适用于FF，IE，Safari和Chrome的小提琴..

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

Answer 4

我想我找到了解决方案。我有一个类似的问题，试图根据父DIV高度（有高度auto）改变DIV（包含浮动DIV）的高度。它适用于IE，但不适用于Chrome。在Chrome中，父DIV甚至没有适当的高度，就像Chrome没有将浮动的DIV计算为父DIV的一部分。

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

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

请参阅，现在我们看到红色虚线父DIV：http://jsfiddle.net/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 ); 

});

Source

方法2 （超过90％以上的浏览器支持，但不支持IE8）

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

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

Source

方法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
    });
}

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

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

5 个答案: