IE 11 中的 Blazor（服务器端）边栏兼容性问题

Question

我最近一直在使用 Blazor Apps（服务器端）并注意到 IE 11 支持需要 Polyfill 来实现某些不受支持的功能。

虽然我已经应用了必要的依赖项来完成这项工作，但我在 IE 11 上的侧边栏的行为方式与其他浏览器（Edge、Chrome、Firefox）截然不同。

当我滚动 "main" 内容时，边栏向上移动并在页面的其余部分留下一个巨大的空白 space。

有人遇到过这种情况吗？（注意：没有更改有关前端的任何代码...）

Update:

    <div class="sidebar">
    <div class="top-row pl-4 navbar navbar-dark">
    <a class="navbar-brand" href="">
        <img src="../images/hightide-logo.png" width="80" height="60" class="d-inline-block align-top" alt="" style="margin-top: -5px">
    </a>
    <button class="navbar-toggler" @onclick="ToggleNavMenu">
        <span class="navbar-toggler-icon"></span>
    </button>
</div>

<div class="@NavMenuCssClass" @onclick="ToggleNavMenu">
    <ul class="nav flex-column">
        <li class="nav-item px-3">
            <NavLink class="nav-link" href="" Match="NavLinkMatch.All">
                <span class="oi oi-home" aria-hidden="true"></span> Home
            </NavLink>
        </li>
        <li class="nav-item px-3">
            <NavLink class="nav-link" href="contact-us">
                <span class="material-icons">email</span> Contact us
            </NavLink>
        </li>
    </ul>
</div>
</div>

<div class="main">
    <div class="top-row px-4 auth">
        <LoginDisplay />
    </div>

    <div class="content px-4 mt-2">
        @Body
    </div>

    <LayoutFooter>
        <!-- Footer Goes Here -->
    </LayoutFooter>
</div>



.sidebar {
    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
}

    .sidebar .top-row {
        background-color: #f4f5f7;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
    }

    .sidebar .navbar-brand {
        font-size: 1.1rem;
    }

    .sidebar .oi, .sidebar .material-icons {
        width: 2rem;
        font-size: 1.1rem;
        vertical-align: text-top;
        top: -2px;
    }

    .sidebar .nav-item {
        font-size: 0.9rem;
        padding-bottom: 0.5rem;
    }

        .sidebar .nav-item:first-of-type {
            padding-top: 1rem;
        }

        .sidebar .nav-item:last-of-type {
            padding-bottom: 1rem;
        }

        .sidebar .nav-item a {
            color: #d7d7d7;
            border-radius: 4px;
            height: 3rem;
            display: flex;
            align-items: center;
            line-height: 3rem;
        }

            .sidebar .nav-item a.active {
                background-color: rgba(255,255,255,0.25);
                color: white;
            }

            .sidebar .nav-item a:hover {
                background-color: rgba(255,255,255,0.1);
                color: white;
            }

Answer 1

当滚动出现时，网页看起来像 this。如果这是问题所在，让侧边栏覆盖其余高度。您可以如下更改侧边栏 CSS 样式（设置底部属性）：

.sidebar {
     width: 250px; 
     position: sticky; 
     top: 0px; 
     bottom: 0px;
}

[注意] 你也应该在 site.css[=29= 中更改 .sidebar css 样式]文件，对于media query中的.sidebar CSS样式，也需要去掉高度属性，像这样：

然后，输出像这样。

IE 11 中的 Blazor（服务器端）边栏兼容性问题

Blazor (Server-Side) Sidebar Compatability Issues in IE 11

sidebar

internet-explorer-11

bootstrap-4