Question

我在Internet Explorer 11和Microsoft Edge中遇到了一个非常奇怪的问题（Chrome中的不也没有Firefox）。

我正在使用带有下拉菜单的导航栏（由Bootstrap设计）。

看起来像这样：

-------------------------------------------------------------------
brand image                                         qa1 qa2 user _
-------------------------------------------------------------------
Reporting _
-------------------------------------------------------------------

（下划线表示插入符号）

标记如下：

<div class="navbar-fixed-top">

  <nav class="topbar">
    <div class="container">
        <!-- hamburger + brand image: I guess not important for the issue -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                <span class="sr-only"/>
                <span class="icon-bar"/>
                <span class="icon-bar"/>
                <span class="icon-bar"/>
            </button>
            <a class="navbar-brand" href="/mvc/">
                <img alt="" src="/mvc/static/images/client_logo.png" />
            </a>
        </div>

        <!-- quick actions + user menu -->
        <div id="navbar" class="navbar-collapse collapse">
            <ul class="nav navbar-nav navbar-right">

                <li class="visible-sm visible-md visible-lg">
                    <a href="#" onclick="SomeHandler(); return false;" title="qa1">
                        <span class="icon icon-something"/>
                    </a>
                </li>

                <li>
                    <a href="https://localhost:4820/mvc/somewhere" target="_self" title="qa2">
                        <div class="notification-icon">
                            <span class="icon-notification-bell"> </span>
                        </div>
                    </a>
                </li>


                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">username<span class="icon icon-user"/>
                        <span class="caret"/>
                    </a>

                    <ul class="dropdown-menu  wfc-usermenu" role="menu">
                        <li>
                            <a href="/mvc/User/ChangePassword" target="_self">Change password</a>
                        </li>
                        <li>
                            <a href="/mvc/User/Logout" target="_self">Logout</a>
                        </li>
                    </ul>
                </li>
            </ul>

        </div>

    </div>
</nav>

<nav class="visible-sm visible-md visible-lg navbar navbar-default menubar">
    <div class="container">
        <ul class="navbar-nav nav" id="menu">
            <li class="root-menu-item dropdown"> <!-- #!# -->
                <a aria-expanded="false" class="dropdown-toggle" data-toggle="dropdown" href="/mvc/Reporting" role="button">Reporting<span class="caret"/>
                </a>
                <!-- this ul is not always shown -->
                <ul class="dropdown-menu" role="menu">
                    <li>
                        <a href="/mvc/Reporting/EmployeeOverview">Employee reports</a>
                    </li>
                </ul>
            </li>
            <!-- in reality there are more menu items, but you get the idea -->
        </ul>
    </div>
</nav>

</div>

当页面加载时以及当我从菜单中选择“报告”时，会发生什么事情。下拉列表未显示。但是，我可以看到open css类是在标有#!#的列表项上设置的。当我调整浏览器窗口的大小时，子菜单突然显示（同样当F12 DOM浏览器打开并且我选择了某个标记时），之后，我可以愉快地打开和关闭子菜单，因为我想要多次至。感觉好像IE（和Edge）最初不能绘制它，但在调整大小或做其他事情时被迫重绘。

navbar-fixed-top css类似乎是此处的交易破坏者，提供position: fixed属性。如果我省略这个（并且只有这个）属性，一切正常。

当我将兼容模式设置为IE9时，它也可以工作（是的！）。

F12控制台没有错误。

由于页面非常复杂，我无法将其简化为最基本的内容并为您提供整页（我开始这样做，但这需要很长时间）。我知道你可能无法重现它，这可能无法提供一些具体的答案，但我仍然对一些建议感到满意（“试试这个”，“试试看”）。

我正在使用jQuery 2.1.4和Bootstrap 3.3.4（在angular，moment，lodash，...旁边）

IE / Edge中的绘画问题：仅在调整浏览器窗口大小后显示css下拉列表

0 个答案: