如何让 display:grid（或 ms-grid）在 Internet Explorer 11 中工作？答案

【问题标题】：How can I get display:grid (or ms-grid) to work in Internet Explorer 11?如何让 display:grid（或 ms-grid）在 Internet Explorer 11 中工作？
【发布时间】：2021-01-14 13:48:50
【问题描述】：

@media (min-width: 100px) {
    .my-header {
        .header-info-nav {
            top: -38px;
            float: right;
            .username,
            .change-profile, 
            .ttm-link {
                float: right;
                font-size: 12px;
                .header-username,
                a {
                    float: right;
                }
            }
        }
    }
}
@media (min-width: 768px) {
    .my-header {    
        .my-logo1 {
            display: none;
        }
        .my-logo2 {
            position: absolute;
            top: 16px;
            img {
                width: 196px;
            }
        }
        .header-info-nav {
            position: relative;
            top: -5px;
            display: grid;
            display: -ms-grid;
            float: right;
            .username,
            .change-profile, 
            .ttm-link {
                font-size: 14px;
            }
        }
    }
}

<div class="container my-header">
    <div class="my-logo1">
        <img src="/images/my-Business-Logo-small.gif">
    </div>
    <div class="my-logo2">
        <img src="/images/my-Business-Logo.gif">
    </div>
    <div class="header-info-nav">
        <div class="username">
            <%= GetUsername() %>
        </div>
        <div class="change-profile">
            <a href="#">Change Profile</a>
        </div>
        <div class="ttm-link">
            <a href="#">Back to TTM</a>
        </div>
    </div>
</div>

我将显示设置为网格，因为出于某种原因，我的 header-info-nav div 没有按照我的预期堆叠。我能找到的关于 div 问题的所有信息都是人们试图让他们并排的地方，但我的问题恰恰相反。

这是一个头文件，它应该在左侧显示 1 个徽标，在右侧显示 3 个堆叠的 div。然而，在 Internet Explorer 11 中，所有 div 都在彼此之上（重叠），就好像它们处于同一位置一样。任何帮助将不胜感激。

【问题讨论】：

标签： html css twitter-bootstrap internet-explorer

【解决方案1】：

您说，“它应该在左侧显示 1 个徽标，在右侧显示 3 个堆叠的 div。但是，在 Internet Explorer 11 中，所有 div 都在彼此之上（重叠），就好像它们在同一个位置。"

我建议尝试在相关类中添加 ms-grid-column 和 -ms-grid-row，这可能有助于解决 IE 11 浏览器的问题。

修改后的 CSS 代码：

@media screen and (min-width: 100px) {
    .my-header .header-info-nav {
        top: -38px;
        float: right;
    }
    .username,
    .change-profile,
    .ttm-link {
        float: right;
        font-size: 12px;
        .header-username,
        a {
            float: right;
        }
    }
}

@media screen and (min-width: 768px) {
    .my-header .my-logo1 {
        display: none;
    }
    .my-header .my-logo2 {
        position: absolute;
        top: 16px;
        img {
            width: 196px;
        }
    }
    .my-header .header-info-nav {
        position: relative;
        top: -5px;
        display: grid;
        display: -ms-grid;
        float: right;
    }
    .username {
        ms-grid-column: 1;
        grid-column: 1;
        -ms-grid-row: 1;
    }
    .change-profile {
        ms-grid-column: ;
        grid-column: 1;
        -ms-grid-row: 2;
    }
    .ttm-link {
        ms-grid-column: 1;
        grid-column: 1;
        font-size: 14px;
        -ms-grid-row: 3;
    }
}

在 IE 11 浏览器中的输出：

【讨论】：

谢谢迪帕克！经过几次调整后，效果很好！

【解决方案2】：

由于您使用的是 IE 的相关前缀，因此我在您的 css 中看不到任何其他问题。但我能想到的唯一一件事是，在 IE 中考虑网格时，您必须注意有时在 <main> 标记中使用它会出现问题。如果是这种情况，请尝试将其替换为 <section role="main"> 之类的内容。

【讨论】：