css - 100% 宽度绝对定位的 flexbox 不受 IE 中的 CSS Grid 约束

问题描述

我在 CSS 网格中有一些 flex 元素，我需要绝对定位其中一个元素。我已将宽度设置为 100%，以便它占据整列。在 Firefox/Chrome/Safari 上，它按预期工作（元素占据了 40% 宽度列的 100%），但是，在 IE 中，元素不受 40% 列的约束，最终占据了 100%网格。我已经position:relative;设置了网格容器，我认为它会限制列内内容的宽度，但由于某种原因在 IE 上它没有。

这是它在 IE 中的样子：

这是期望的结果（以及它在现代浏览器中的外观）：

关于如何解决这个问题的任何想法？

.container {
  display:-ms-grid;
  display:grid;
  -ms-grid-columns:40% 60%;
      grid-template-columns:40% 60%;
  position:relative;
}

.ele {
  display:-ms-flex;
  display:flex;
}
  .ele:first-child {
    -ms-grid-column-span:1;
    -ms-grid-column:1;
        grid-column:1 / span 1;
    -ms-grid-row-span:1;
    -ms-grid-row:1;
        grid-row:1;
    position:absolute;
    width:100%;
  }
  .ele:nth-child(2) {
    -ms-grid-column-span:1;
    -ms-grid-column:2;
        grid-column:2 / span 1;
    -ms-grid-row-span:1;
    -ms-grid-row:1;
        grid-row:1;
  }

<div class="container">
  <div class="ele">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris aliquam eros quis rhoncus venenatis. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In nec dui interdum, tincidunt metus sed, faucibus est. Aliquam hendrerit arcu in libero pellentesque euismod. Ut eleifend tortor at auctor pellentesque. Curabitur sit amet tincidunt neque. Aliquam ultricies, dolor lobortis euismod pellentesque, lorem arcu egestas lorem, nec consequat sem risus eu risus. Ut eu ex volutpat, semper est id, elementum massa. Praesent metus nibh, pharetra et condimentum vitae, aliquam et massa. Ut vitae efficitur magna. Quisque risus massa, finibus a viverra et, accumsan eget velit. In egestas vestibulum suscipit. Sed vitae iaculis ligula. Suspendisse massa nisl, rutrum a accumsan sit amet, molestie eget sapien. Suspendisse sed nisl quis ligula porta sodales sit amet eget nunc. Mauris luctus lorem tellus, eu egestas diam porttitor nec. 
  </div>
  <div class="ele">
    Some more content goes here
  </div>
</div>

标签： cssinternet-explorerflexboxcss-grid

从网格规范：

网格容器的绝对定位子项是不流动的，而不是网格项，因此不会影响其他项的放置或网格的大小。

.ele:first-child因此，应该忽略上的网格属性，它是网格容器的绝对定位子项。grid-column这就是为什么元素在 IE 中不受约束的原因。

当然，规范指南就是：指南。因此渲染可能因浏览器而异。我怀疑这就是为什么你会看到 Chrome、Safari 和 Firefox 和 IE 之间的区别。

css - 100% 宽度绝对定位的 flexbox 不受 IE 中的 CSS Grid 约束

问题描述

解决方案

推荐阅读