相关疑难解决方法(0)

我正在为我的网格使用以下HTML标记.

<section class="grid">
    <article class="grid-item width-2x height-2x">....</article>
    <article class="grid-item">....</article>
    <article class="grid-item">....</article>
    <article class="grid-item width-2x">....</article>
    <article class="grid-item height-2x">....</article>
    <article class="grid-item">....</article>
    <article class="grid-item">....</article>
    <article class="grid-item width-2x height-2x">....</article>
</section>

SCSS代码如下所示:

.grid {
    display: grid;
    grid-template-columns: repeat( 4, 1fr );
    grid-gap: 30px;
    align-items: start;

    .grid-item {
        &.height-2x {
            grid-row: span 2;
        }
        &.width-2x {
            grid-column: span 2;
        }
    }
}

由于我在我的工作流程中使用自动前缀,因此它会自动添加带有-ms前缀的所有相关属性.我可以通过检查元素确认.

现在,问题是此代码在Chrome,Firefox和Opera中运行良好,但是当我在Microsoft Edge或IE 11中打开此页面时,所有网格项在第一个单元格处相互重叠.根据这个站点,这些浏览器支持带有-ms前缀的CSS Grid布局.我为这个场景创建了一个CodePen.

CodePen链接

为什么不起作用？

.grid {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (1fr)[4];
  grid-template-columns: repeat(4, 1fr); …

我正试图找到一种方法来显示一个链接到IE用户和另一个链接到所有其他浏览器使用JavaScript或条件评论(或任何需要).

基本上...

//pseudo code
<!--[if IE]>
    <a href"ie-only.html">click here!</a>
<!--[else]>
    <a href"all-other-browsers.html">click here!</a>
<![endif]-->

我不认为条件评论标签(仅适用于Internet Explorer)可以实现这一点.另外,我认为没有"其他"声明.

有没有办法用javascript做到这一点？请帮忙!谢谢!