chrome 上的 Jquery width() 函数在加载和重新加载时给我不同的值(F5)

Question

我不知道发生了什么，但我有这样的菜单设置

<div class="indice_item activo">
<div class="indice_item">
<div class="indice_item">
<div class="indice_item">
<div class="indice_item">
<div id="puntero" style="width: 180px; height: 19px; top: 70px; left: 0px; background-color: rgb(10, 173, 247);">&nbsp;</div>

问题是 div.puntero 是一个 div，当鼠标悬停在不同的 indice_item 上时，它会跟随鼠标。我用 jquery 及其动画函数来做到这一点。当页面加载时，它会创建这个 div.puntero，它会查找该菜单的第一个项目并获取宽度以及顶部和左侧坐标，因此它可以在具有 activo 类的项目下设置 div.puntero。

这是执行此操作的代码

/*
 * Seleccionado el primero activo 
 */
$(document).ready(function() {
    $('div.indice_item').last().after('<div id="puntero">&nbsp;</div>');
    //seteamos el puntero donde debe estar
    ancho=$('div.indice_item').first().width()
    alert(ancho);
    $('#puntero').width($('div.indice_item').first().width());
    $('#puntero').height(($('div.indice_item').first().height()+3));
    $('#puntero').css({
        "top"  : $('div.indice_item').position().top,
        "left" : $('div.indice_item').position().left
    });
    $('.indice_item').each(function (){
        //$(this).
    });
});

这在 Firefox 中工作得很好，但在 chrome 中我遇到了几个问题，它似乎工作正常。但后来我按下重新加载或 F5，div.puntero 的宽度变得疯狂。我添加了警报(ancho)；对于宽度，当我转到该页面时，它会给我正确的宽度 180，当我按重新加载 1665 或 1649 时，图表的宽度。为什么它会这样工作？

Answer 1

尝试在所有内容加载后设置高度和宽度，即使用 $(window).load(function() {//在此处设置高度和宽度});。

我相信由于缓存，它在 Firefox 中似乎工作得很好。也许我错了，只需设置jsFiddle即可。查明问题会容易得多。