0

我正在为我的网站构建一个以移动设备为目标的菜单，而我的默认 Android 浏览器表现得非常有趣。我已经将所有内容都精简到最低限度，并且尽可能基本地测试所有内容。

我正在使用 jquery 的 .Toggle 功能让我的菜单出现和消失。它功能完美。就像在所有浏览器中一样。我去我的移动设备上测试它，它在 Firefox 中工作/看起来很完美。然后我在默认的Android浏览器中进行了测试。令我沮丧的是，有一个问题。

当您单击切换菜单以使其显示的 div 时，该 div 向左移动，在菜单右侧留下一个间隙。有趣的是，我在菜单容器内有一个 div，它保持 100% 的宽度，并延伸到屏幕的最右侧。菜单 div 内的 div 的 css 实际上具有完全相同的 css。所以我很困惑为什么它保留它的 100% 宽度而不是切换时出现的我的 div。有没有人有任何想法？下面是问题和我的代码的屏幕截图。

截屏

html

    <div id="mobilemenu">
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Random</a></li>
        <li><a href="#">Submit</a></li>
    </ul>

    <div id="mobilemenu-catdrop">
        Categories
    </div>
</div>

<script>
    var flip = 0;
    $("#click").click(function () {
    $("#mobilemenu").toggle( flip++ % 2 == 0 );
    });
</script>

css

    /* header */
header {
    background: #2e97de;
    width: 100%;
    height: 45px;
    border-bottom: #287eb9 1px solid;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
    display: block;
}

/* mobile menu */
#mobilemenu {
    border-top: #8dc8f2 1px solid;
    width: 100%;
    background: #2e97de;
    display: none;
}

#mobilemenu ul {

}

#mobilemenu li {
    display: block;
}

#mobilemenu li a {
    padding: 10px;
    color: #95d3ff;
    display: block;
    text-decoration: none;
}

#mobilemenu-catdrop {
    width: 100%;
    background: #1e6291;
    color: #FFF;
    padding: 10px;
    display: block;
}
4

1 回答 1

1

发生这种情况是因为 div#mobilemenu-catdrop实际上超出了宽度，#mobilemenu因为您使用的是 100% 宽度的填充。将您在标题上使用的边框框与该 div 一起使用：

#mobilemenu-catdrop {
    width: 100%;
    background: #1e6291;
    color: #FFF;
    padding: 10px;
    display: block;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
}
于 2013-08-31T20:33:39.560 回答