时间戳

首页 > 解决方案 > IE11 和 CSS 网格

css - IE11 和 CSS 网格

问题描述

这种布局在 IE11 中是否可行（非常粗略的例子）？

$(document).on('click', '.js-toggle-hide', function(e){
  e.preventDefault();
  $(this).parent().parent().find('.js-hide').toggle();
});
@charset "UTF-8";
.c-sidebar {
  display: grid;
  grid-template-columns: 120px auto;
  outline: 1px solid #ccc;
  overflow: auto;
}

.c-cat {
  display: grid;
  grid-template-columns: 120px auto;
  grid-template-rows: auto;
}
.c-cat__name {
  grid-row: 1 / 1000;
}
.c-cat__toggle {
  grid-row: 1 / 999;
  min-width: 120px;
}
.c-cat__subcat {
  grid-column: 3 / 4;
  min-width: 120px;
}
.c-cat__subcat--all {
  grid-column: 2 / 4;
}

/* decoration */
body {
  padding: 15px;
  background: #eee;
  font-size: 11px;
}

.c-cell {
  background: #fff;
  outline: 1px solid #ccc;
  padding: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>

请注意，右侧列中的项目数量未定义（销售类型），客户可以添加/删除它们。

有没有我不知道的css技巧？

另一种方法是使用带有复杂 js/jquery 代码的表（这只是代码的一部分，但它完美地代表了我的困境），这将是非常乏味的工作。

标签： cssgridinternet-explorer-11

解决方案

我的建议是，如果你想成为现代网格并且仍然支持像 IE11 这样的东西......然后从 in 开始，display: flex然后做一个媒体支持来添加你的网格，如下所示：

@supports (display: grid) { #_your css grid here _# }

那么你可以在那里添加你所有的网格......如果你这样做你不一定会重复你只是在这里做网格部分（网格模板，列，行等）并绕过任何其他样式，如颜色，字体, 像素等...

推荐阅读