javascript函数上奇怪的chrome行为来调整div的大小答案

【问题标题】：Strange chrome behavior on javascript function to resize a divjavascript函数上奇怪的chrome行为来调整div的大小
【发布时间】：2013-01-04 07:08:34
【问题描述】：

我编写了一个脚本来调整 div 的大小，相对于另一个 div 的高度加上 70px（即边距（顶部和底部）的大小），并将其加载到 window.onload 函数中。

        <script language="JavaScript">
        function tamanho_wrapper2(){
            var mydiv = document.getElementById("topicos");
            var current_height = parseInt(mydiv.offsetHeight);
            var wrapper2 = document.getElementById("wrapper2");
            wrapper2.style.height = current_height+70+"px";

        }
    </script>

它在 firefox 上运行，div 正是我想要的样子。但是在 chrome 上，在第一页的加载中，它在我得到高度的 div 的高度中包括底部和顶部边距的大小，所以 div 变得比我想要的大。奇怪的是，当页面重新加载时，chrome 只计算 div 的自身高度，作为 firefox。是否已经发生在你身上？

编辑：好吧，我最后得出的结论是，老事实：浏览器的引擎工作方式不同，而发生在我身上的事情就是一个证明。谢谢大家的关注。

Edit2：神奇的是，浏览器的奇怪行为停止发生了。

【问题讨论】：

很奇怪。您可能想尝试使用 JQuery 并查看它是否可以使用 JQuery 方法。
这里的cmets可能解释了stackoverflow.com/questions/11138887/offsetheight-calculation的行为

标签： javascript html css google-chrome webkit

【解决方案1】：

尝试重置您的样式表（上面的链接）。所有浏览器对每个元素都有自己的默认样式，也许 Chrome 正在将其默认样式添加到您的 div 中，其他浏览器也可能以不同的方式显示它。

http://meyerweb.com/eric/tools/css/reset/

PS：对不起，我的英语有时更差：P

【讨论】：

【解决方案2】：

我不确定为什么您的 javascript 不能在 Chrome 中运行，我觉得它很合适。你试过用jquery吗？我刚刚测试了这个 i chrome 并没有任何不良影响。希望对你有帮助:)

<div id="div1" style="background-color:#ff0000; height:50px; width:10px; float:left;"></div>

<div id="div2" style="background-color:#00ff00; height:150px; width:10px; float:left;"></div>

<input type="button" value="resize" onclick="resizeDiv();" />

然后这个jquery代码：

function resizeDiv(){
$('#div1').css('height', $('#div2').css('height'));
}

【讨论】：