很奇怪;当调用$（this）.width（）时，包含元素将改变大小

我正在制作网页底部的导航栏（用于移动版面），并且我使用jQuery在页面加载。

我有每个按钮作为表格中的单元格，并且每个单元格包含一个图像。我试图根据元素的大小设置图片尺寸。我现在的工作和我想要的完全一样，但我不知道为什么。

我混乱的根源：

$("img.nav").each(function() { 
    $(this).width(); // commenting out this line changes the width of each <td> element  
    $(this).css("display", "block"); 
    $(this).css("height", "80%"); 
    $(this).css("width", "auto"); 
});

这里就是我得到的，当我打印TD的宽度：

以$（本）.WIDTH（）;原因如下：

w 0: 217 
w 1: 217 
w 2: 217

这是完美的。下面是我注释掉该行时的输出：

w 0: 210 
w 1: 200 
w 2: 241

不完美。我需要他们都是一样的。 E：另外，删除“display：none;”在CSS文件中的行模拟相同的问题。

这里是我的代码的其余部分（这是短）：

HTML：

<!DOCTYPE html> 
<html> 
    <head> 
     <meta charset="utf-8" /> 
     <meta name="format-detection" content="telephone=no" /> 
     <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" /> 

     <link rel="stylesheet" type="text/css" href="css/globals.css" /> 

     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
     <script src="cordova.js"></script> 
     <script src="js/libjs.js"></script> 

     <title></title> 
    </head> 
    <body> 
     <div id="content"><p>Some example text that does nothing.</p></div> 

     <nav> 
      <table> 
       <tr> 
        <td id="nav_home" class="active"> 
         <img class="center nav" src="img/home.png" alt="img_nav_home" width="150" height="200"/> 
        </td> 

        <td id="nav_map"> 
         <img class="center nav" src="img/map.png" alt="img_nav_map" width="103" height="200"/> 
        </td> 

        <td id="nav_send"> 
         <img class="center nav" src="img/send.png" alt="img_nav_send" width="286" height="200"/> 
        </td> 
       </tr> 
      </table> 
     </nav> 
    </body> 
</html>

CSS：

* 
{ 
    padding: 0px; 
    margin: 0px; 
    width: 100%; 
    height: 100%; 
    border-style: none; 
    font-family: "Berlin Sans FB", Arial, sans-serif; 
    color: #383c47; 

    -webkit-tap-highlight-color: rgba(0, 0, 0, 0); /* transparent link selection, last value opacity 0 to 1.0 */ 
    -webkit-touch-callout: none;     /* prevent callout to copy image */ 
    -webkit-text-size-adjust: none;     /* prevent resizing text to fit */ 
    -webkit-user-select: none;      /* prevent copy paste */ 
} 

/* Centers an image both horizontally and vertically in it's container. */ 
img.center { 
    display: block; 
    margin: auto; 
} 

body { 
    background-image: url(../img/bg.png); 
} 

#content { 
    background-color: white; 
    width: 70%; 
    height: 70%; 
} 

    #content p { 
     padding: 5%; 
    } 

/* The navigation bar at the bottom of each page. */ 
nav { 
    background-color: #b50043; 
    width: 100%; 
    height: 18%; 
} 

    nav table { 
     border-spacing: 0px; 
    } 

    nav table .active { 
     background-color: #383c47; 
    } 

    nav table img.nav {  
     display: none; /* Also, removing this line will cause the same problem */ 
    } 

    nav table #nav_home { 
     background-color: lightblue; 
    } 

    nav table #nav_map { 
     background-color: green; 
    } 

    nav table #nav_send { 
     background-color: blue; 
    }

的jQuery：

// Centers the element both vertically and horizontally in the given element. 
// Allows Top and Left offsets to account for "fixed" elements in the parent. 
// Does not work with images (images work a little differently). 
jQuery.fn.center = function(parent, offsetTop, offsetLeft) { 
    $(this).css("position", "absolute"); 
    $(this).css("top", ($(parent).height() - this.outerHeight())/2 + offsetTop); 
    $(this).css("left", ($(parent).width() - this.outerWidth())/2 + offsetLeft); 

    return $(this); 
} 

// Use .resize and .ready to adjust layout based on screen size 
$(window).resize(function() { 
    $("#content").center($(window), -($("nav").height()/2), 0); 

    // positions the navigation bar at the bottom of the page 
    $("nav").css("position", "fixed"); 
    $("nav").css("top", $(window).height() - $("nav").height()); 

    // equally distribute nav buttons over the width of the screen 
    $("nav table tr > td").each(function() { 
     $(this).width($("nav").width()/$(this).length); 
     $(this).height($("nav").height()); 
    }); 

    $("img.nav").each(function() { 
     //$(this).width();   
     $(this).css("display", "block"); 
     $(this).css("height", "80%"); 
     $(this).css("width", "auto"); 
    }); 

    $("td").each(function(i) { 
     console.log("w " + i + ": " + $(this).width()); 
    }) 

}); 

$(document).ready(function() { 
    $(window).trigger('resize'); 
});

提前感谢！

来源

2014-05-15 cohenadair

这不应该发生，我疯狂地猜测你不会等待图像加载，并且对.width（）的调用不知何故花费足够的时间来加载图像或类似的东西。 – adeneo

但是在jQuery的.ready事件被触发之前不要加载图像？那个.width（）调用只在页面加载后调用。 – cohenadair

不，DOM已准备好在document.ready上，不能保证图像已经加载。 – adeneo