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

我最近一直在使用Blazor应用程序（服务器端），并注意到IE11支持需要Polyfill来提供一些不受支持的功能

虽然我已经应用了必要的依赖项来实现这一点，但我在IE11上的侧边栏与其他浏览器（Edge、Chrome、Firefox）的运行方式非常不同

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

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

更新：


家


电邮联系我们


@身体
.侧边栏{
背景图像：线性梯度（180度，rgb（5，39，103）0%，#3a0647 70%）；
}
.侧边栏.第一排{
背景色：#f4f7；
盒影：0 2px 10px rgba（0,0,0,0.25）；
}
.侧边栏.导航栏品牌{
字号：1.1rem；
}
.sidebar.oi、.sidebar.material图标{
宽度：2em；
字号：1.1rem；
垂直对齐：文本顶部；
顶部：-2px；
}
.侧栏.导航项{
字体大小：0.9rem；
垫底：0.5雷姆；
}
.侧栏.导航项：类型的第一个{
垫面：1毫米；
}
.侧栏.导航项：类型的最后一个{
垫底：1毫米；
}
.侧栏.导航项目a{
颜色：#d7d7d7；
边界半径：4px；
高度：3雷姆；
显示器：flex；
对齐项目：居中；
线高：3rem；
}
.侧栏.导航项目a.激活{
背景色：rgba（255255,0.25）；
颜色：白色；
}
.侧栏.导航项目a:悬停{
背景色：rgba（255255,0.1）；
颜色：白色；
}

---

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

[注意]您还应该更改站点.css文件中的

.sidebar

css样式，对于媒体查询中的

.sidebar

css样式，还需要删除height属性，如下所示：

然后，输出如下

---

您是否可以发布足够的代码来重现问题，如中所示。从您的描述和图片中，我想您可能使用的是CSS灵活的方框布局，从中，我们可以看出它部分支持IE浏览器。@ZhiLv MSFT感谢您的帮助。我把razor页面代码和css类放在了一起。我希望这足够了：）我很高兴使用Blazor应用程序，这是WebForms带来的巨大推动！无法重现此问题，我已尝试创建一个新的Blazor应用程序，并在MainLayout.razor组件中使用您的代码，结果是，它在IE浏览器中一切正常。@ZhiLv MSFT感谢您的反馈，您是否尝试在呈现的页面（正文）中创建更多内容？当滚动条出现在浏览器上时，就好像侧边栏没有足够的高度来覆盖其余的高度。（我不知道我的解释是否正确）请检查我的回复，问题是否与site.css文件中的height属性有关，删除height属性并添加bottom属性后，是否解决了问题。这个答案再好不过了。谢谢你的解释！：）

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;
            }

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