我的CSS在使用javascript时将div移动到左侧。切换（包括屏幕截图）

Question

我正在为我的网站构建一个菜单来定位移动设备，而我的默认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;
}

Answer 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+ */
}