Question

我正在网页底部制作导航栏（用于移动布局），并在页面加载后使用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宽度时得到的结果：

使用$（this）.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');
});

提前致谢！

Answer 1

您应该在$(window).load而非$(document).ready上更改通话时调整大小。

问题出在接下来的事情 - document.ready 事件在加载HTML文档且DOM准备就绪时被触发，但您需要等到所有图像都加载。

文档：

onload Event

ready Event

Answer 2

我能够通过使用

解决这个问题

table-layout: fixed;

均匀分布表格单元格而不是在页面加载时计算它。不知道为什么我之前没想过这个。

很奇怪;包含元素在调用$（this）.width（）时更改大小

2 个答案: