IE11中能否实现该CSS Grid布局？求可行CSS方案

咱们先直接给出核心结论：你当前的CSS Grid布局无法在IE11中正常渲染，接下来我会拆解原因、分享可优化的CSS技巧，以及更轻量化的IE兼容替代方案。

一、为什么IE11不支持这个布局？ #

IE11对CSS Grid的支持是过时且残缺的，它只认旧版带-ms-前缀的Grid语法，而且很多现代Grid特性都不支持：

• 不支持grid-row: 1 / 1000这种“跨所有行”的简化写法（IE11要求明确指定行号，没法用这种“hack式”的大数来跨任意多行）
• 对grid-column: 3 / 4这类基于列线的定位逻辑支持混乱，列线编号和现代浏览器不一致，容易导致元素错位
• 面对动态增删的子分类项，IE11的Grid无法自动适配行/列的生成，很容易出现元素重叠、布局错乱的问题

二、可以优化的CSS技巧（针对现代浏览器） #

你当前的代码已经用到了Grid跨行列的核心技巧，但还有几个更规范、更健壮的写法可以改进：

• 替换硬编码的行号：把grid-row: 1 / 1000改成grid-row: 1 / -1，这是标准的“从第一行跨到最后一行”的写法，语义化更强，也不会因为行数变化出问题
• 用1fr替代auto：.c-sidebar和.c-cat的grid-template-columns里，把auto换成1fr，让右侧列自动占满剩余空间，布局更稳定
• 用Grid间隙替代边框：可以去掉.c-cell的outline，给父容器加gap: 1px和背景色，实现单元格之间的分隔线，避免边框重叠的问题

优化后的CSS代码示例：

@charset "UTF-8";
.c-sidebar { 
  display: grid; 
  grid-template-columns: 120px 1fr; 
  gap: 1px; /* 用间隙实现分隔线 */
  background: #ccc; /* 间隙的颜色 */
  overflow: auto; 
}
.c-cat { 
  display: grid; 
  grid-template-columns: 120px 1fr; 
}
.c-cat__name { 
  grid-row: 1 / -1; /* 语义化跨所有行 */
}
.c-cat__toggle { 
  min-width: 120px; 
}
.c-cat__subcat { 
  grid-column: 2 / -1; /* 从第二列跨到最后一列 */
  min-width: 120px; 
}
.c-cat__subcat--all { 
  grid-column: 1 / -1; /* 跨所有列 */
}
/* decoration */
body { padding: 15px; background: #eee; font-size: 11px; }
.c-cell { background: #fff; padding: 10px; }

三、IE11兼容的替代方案 #

如果必须支持IE11，除了你提到的“表格+复杂JS”这种高成本方案，还有更轻量化的选择：

• Flexbox嵌套布局：虽然Flex是一维布局，但可以通过嵌套Flex容器来模拟类似的效果，配合JS控制子元素的显示隐藏，开发和维护成本都比表格方案低很多
• IE专属降级代码：针对IE11单独写带-ms-前缀的Grid代码，但需要手动计算行号，动态子项的场景下要配合JS更新Grid模板，虽然有点麻烦，但比表格方案高效

完整优化版代码（现代浏览器） #

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Category Sidebar</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <style>
    @charset "UTF-8";
    .c-sidebar { 
      display: grid; 
      grid-template-columns: 120px 1fr; 
      gap: 1px;
      background: #ccc;
      overflow: auto; 
    }
    .c-cat { 
      display: grid; 
      grid-template-columns: 120px 1fr; 
    }
    .c-cat__name { 
      grid-row: 1 / -1;
    }
    .c-cat__toggle { 
      min-width: 120px; 
    }
    .c-cat__subcat { 
      grid-column: 2 / -1;
      min-width: 120px; 
    }
    .c-cat__subcat--all { 
      grid-column: 1 / -1;
    }
    /* decoration */
    body { padding: 15px; background: #eee; font-size: 11px; }
    .c-cell { background: #fff; padding: 10px; }
  </style>
</head>
<body>
  <div class="c-sidebar">
    <div class="c-cell">All Categories</div>
    <div>
      <div class="c-cat">
        <div class="c-cat__name c-cell">Sales</div>
        <div class="c-cat__toggle c-cell">
          <a href="" class="js-toggle-hide">All items</a>
        </div>
        <div class="c-cat__subcat c-cell js-hide">Export sales</div>
        <div class="c-cat__subcat c-cell js-hide">Other sales</div>
        <div class="c-cat__subcat c-cell js-hide">Product sales</div>
        <div class="c-cat__subcat--all c-cell js-hide"><b>All items</b></div>
      </div>
    </div>
  </div>
  <script>
    // 优化JS选择器，用closest替代多层parent，更健壮
    $(document).on('click', '.js-toggle-hide', function(e){ 
      e.preventDefault(); 
      $(this).closest('.c-cat').find('.js-hide').toggle(); 
    });
  </script>
</body>
</html>

内容的提问来源于stack exchange，提问作者Dusan Stojanovic