html - Chrome 在打开隐藏元素时将内容向左移动并且在关闭元素时不返回它

Question

这是我的第一个问题，我经常使用这个网站来寻找答案，所以希望更多地参与进来。

我有一个奇怪的 Chrome/CSS 相关问题。在我建立的一个网站上，有一个隐藏的菜单，当您打开它时，它是巨大的。

问题是，如果你在 Chrome 上，如果你打开菜单并且没有初始滚动条，它会创建一个滚动条的需要，它会向左移动所有内容，但是当你关闭菜单并且滚动条消失时，主体内容向后移动，但站点标题保持在左侧。

我已经添加了截图来演示这个。我无法访问网站页面，因为其中包含敏感的业务数据。

初始页面加载: 我只能添加 2 个链接，因为没有足够的积分! :( 此图像与菜单关闭图像相同，但全部对齐。

菜单打开: The menu here is open and has the dark background

菜单关闭: The menu is now closed and you can see the alignment is now off. You can see the background white is shifted in the top right.

这是 CSS 的一个基本示例:

<div class="topbar">
    <div class="container">

        <div class="row">

            <div class="visible-xs col-xs-3">
                <a href="#" class="menu-option mobile menu-toggle"><i class="icon-handle"></i></a>
            </div><!--col-->

            <div class="col-xs-6 col-sm-4">
                <a href="/" class="topbar-logo">
                    <img src="/images/logo.png" alt="">
                </a>
            </div><!--col-->

            <div class="visible-xs col-xs-3"></div><!--col-->

            <div class="clearfix visible-xs"></div>

            <div class="col-xs-2  no-padding-right visible-xs">
                <div class="page-title mobile">
                    <h1>TEST</h1>
                </div>
            </div><!--col-->

            <div class="col-xs-10 col-sm-push-4 col-sm-3 hidden-xs">
                <div class="topbar-block dealership">
                    TEST
                </div><!--topbar-block-->
            </div><!--col-->

            <div class="col-xs-10 col-sm-push-4 col-sm-3 visible-xs no-padding-left">
                <div class="topbar-block dealership">
                    <span class="topbar-block-smalltext">TEST</span>
                </div><!--topbar-block-->
            </div><!--col-->

            <div class="clearfix visible-xs"></div>

            <div class="col-xs-6 col-sm-pull-3 col-sm-2">
                <div class="topbar-block">
                    <span class="topbar-block-title">TEST Code</span>
                    <span class="topbar-block-bigtext">TEST</span>
                </div><!--topbar-block-->
            </div><!--col-->

            <div class="col-xs-4 col-sm-pull-3 col-sm-2">
                <div class="topbar-block">
                    <span class="topbar-block-title">Area</span>
                    <span class="topbar-block-bigtext"> 1-10 </span>

                </div><!--topbar-block-->
            </div><!--col-->

            <div class="col-xs-2 col-sm-1">
                <a href="/log-out.php" class="topbar-block">
                    <span class="topbar-block-title">Logout</span>
                    <i class="icon-padlock-closed topbar-block-icon"></i>
                </a><!--topbar-block-->
            </div><!--col-->

        </div><!--row-->

    </div><!--container-->
</div><!--topbar-->

<div class="mainmenu-spread">
    <div class="container spaced">
        <div class="row page-controls">

                <div class="col-xs-6 col-sm-2">
                    <a href="/api/auto-aimm-login.php?redirect=https://www.hyundaiaimm.co.uk/order-history/" class="menu-option" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="AIMM Marketing Fund"><i class="icon-moneybox menu-option-icon"></i> <span class="moneybox-text">= N/A</span></a>
                </div><!--col-->

                <div class="col-xs-6 col-sm-3">
                                            <a href="/golden-ticket/" class="menu-option golden-ticket-count">
                        <i class="icon-golden-ticket menu-option-icon"></i>
                        <span>
                            <span class="text-gold">748</span> GOLDEN TICKETS <span class="hidden-991">REDEEMED</span>
                        </span>
                    </a>
                </div><!--col-->

        </div><!--row-->

        <nav class="mainmenu">
            <h2 class="mainmenu-title">Navigation</h2>

            <div class="row">

            </div><!--row-->
        </nav><!--mainmenu-->

    </div><!--container-->
</div><!-- mainmenu-spread -->

顶部栏没有向后移动，但没有任何提示为什么？是 Chrome 的问题吗？

我在谷歌上搜索了这个问题，但只有大量与 Chrome 滚动条投诉相关的内容，而且在这里也找不到任何内容。

如有任何帮助，我们将不胜感激。

谢谢。

Answer 1

我实际上找到了这个问题的答案。

对齐的解决方案是添加 overflow:hidden;菜单关闭时到 .topbar。我不确定为什么这是修复，但它有效。 我们还在内容比显示器更深且菜单打开的页面上遇到了双滚动条。为了对此进行排序，我们添加了 display:none;打开菜单时到主页内容。

如果有人看过这个并试图想出一个解决方案，谢谢!