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

Question

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

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

当我滚动“主要”内容时，侧边栏会向上移动，并在页面的其余部分中留出巨大的空白。

有人经历过吗？ （注意：未更改有关前端的任何代码...）

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样式（设置bottom属性）：

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

[Note]您还应该在site.css文件中更改.sidebar css样式，对于媒体查询中的.sidebar CSS样式，还需要删除height属性，就像这样：

然后，这样的输出。