jQuery 高度，每个和 CSS 一起在 Chrome 中工作不正常

Question

我有非常简单的代码片段，旨在将 img 在 li 中垂直居中。在每个浏览器中工作都很好，但 Chrome 浏览器总是看到相同的值作为计算结果，这是不可能的。

JavaScript:

$(function(){
    var $li = $("div.operators ul > li");
    var $img;
    var liHeight = $li.height();
    var imgHeight = '';
    var addPadding = '';

    $li.each(function(){
        $img = $(this).children().children("img");
        imgHeight = $img.height();

        imgHeight += 3;

        if(!isNaN(imgHeight))
        {
            addPadding = (liHeight - imgHeight) / 2;
            $img.css("padding-top", addPadding + "px")
        }
    });
});

HTML:

<div class="operators">
    <ul>
        <li>
            <div class="content">
                <img src="logo3.gif">
            </div>
        </li>
        <li>
            <div class="content">
                <img src="logo5.gif">
            </div>
        </li>
            <li>
            <div class="content">
                <img src="logo.gif">
        </div>
    </ul>
</div>

我正在使用 jQuery v@1.8.0。

Answer 1

Chrome JavaScript 引擎被认为是最快的引擎。可能浏览器在图像完全加载之前循环遍历 li 所以尝试(如@Pete 所建议的):

 $(window).load(function(){
       ...
    });

这应该有所帮助。