IE11 修复显示网格布局

Question

在 IE11 和 Edge 中使用时寻找网格布局的解决方案

当前版本

期待 IE11

当右侧内容增加时，我的意思是.button 高度的差距很大，需要避免。

IE11 & Edge 能否避免这些差距？

window.location = '#one';

.my-wrap {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 25% fr;
  grid-template-columns: 25% 1fr;
  grid-gap: 0.5rem;
  width: 90%;
  margin: 50px auto;
  color: #fff;
}

.wrap-one {
  background-color: tomato;
}

.wrap-two {
  background-color: blue;
}

.wrap-three {
  background-color: green;
}

.button {
  text-decoration: none;
  background-color: #333;
  color: #fff;
  padding: 0.5rem 1rem;
  -webkit-transition: all 0.25s;
  transition: all 0.25s;
}

.button:nth-of-type(1) {
  -ms-grid-row: 1;
  grid-row: 1;
}

.button:nth-of-type(2) {
  -ms-grid-row: 2;
  grid-row: 2;
}

.button:nth-of-type(3) {
  -ms-grid-row: 3;
  grid-row: 3;
}

.button:nth-of-type(4) {
  -ms-grid-row: 4;
  grid-row: 4;
}

.button:nth-of-type(5) {
  -ms-grid-row: 5;
  grid-row: 5;
}

.button:hover {
  background-color: #000;
}

.details {
  display: none;
  border: 1px solid #333;
  color: #333;
}

div:target {
  display: block;
}

p {
  margin: 10px;
}

<div class="my-wrap">
  <a href="#one" class="wrap-button-one button">Link One</a>
  <div id="one" class="wrap-one one details">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum voluptates ipsa tempora qui voluptas, dicta corrupti dolorum, iure esse earum ut pariatur, ad possimus facilis consequatur impedit accusantium autem! Nesciunt?</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam repudiandae, dolor unde laudantium ducimus explicabo necessitatibus doloribus. Repellendus quasi necessitatibus omnis culpa sint dolore, error sapiente magni sequi, harum eveniet!</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio est, deserunt autem laboriosam quis culpa ex animi soluta tenetur quo eius illo necessitatibus. Minima deleniti recusandae commodi? Ipsa, laudantium architecto?</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore ipsam, necessitatibus excepturi obcaecati quis consequatur autem, eos incidunt, accusantium esse dolorum? Reprehenderit, dicta pariatur a eligendi placeat optio praesentium architecto.</p>
  </div>
  <a href="#two" class="wrap-button-two button">Link Two</a>
  <div id="two" class="wrap-two two details">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat commodi aspernatur et! Voluptates officiis nemo corporis delectus pariatur. Cupiditate perspiciatis illum minima, porro voluptas velit nobis ad eveniet modi explicabo.</p>
  </div>
  <a href="#three" class="wrap-button-three button">Link Three</a>
  <div id="three" class="wrap-three three details">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis reprehenderit, necessitatibus vel praesentium dolorum vitae sequi in magni voluptate alias fugit saepe eos sint dolore quae sapiente sunt itaque, cupiditate.</p>
  </div>
  <a href="#four" class="wrap-button-four button">Link Four</a>
  <div id="four" class="wrap-four four details">
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolores debitis ducimus optio magnam ratione voluptatem voluptatum repellendus facilis. Repellat velit facilis reiciendis ratione recusandae delectus iure doloribus inventore, dolorum porro?</p>
  </div>
  <a href="#five" class="wrap-button-five button">Link five</a>
  <div id="five" class="wrap-five five details">
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit nam ab, iusto corrupti quos molestiae tempora sapiente eos unde debitis sint exercitationem aperiam hic inventore veniam, in est labore vitae! Lorem ipsum dolor, sit amet consectetur
      adipisicing elit. Tempora, vel maxime! Autem ullam, quidem, ipsum obcaecati vitae alias, omnis dolores amet doloremque accusamus fugiat? Dolor iure ipsa minus nostrum sapiente.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Temporibus voluptatum harum nulla placeat, hic nesciunt consequuntur laborum officia quos eos et id veritatis quibusdam aliquam exercitationem dolores, reiciendis voluptate modi.</p>
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Non voluptas explicabo dolorum at officia deserunt quaerat nam debitis incidunt est, ut pariatur modi ipsa velit laborum, dolorem doloribus dicta consequuntur!</p>
  </div>
</div>

Answer 1

如果你在 IE10 上也没有问题 ;-)

演示：https://codepen.io/jakob-e/pen/XeVLbJ/

基于“CSS Grid Mixins（包括 IE）”：https://codepen.io/jakob-e/pen/RZpdaE/

// ==========================================================
//  CSS Grid Mixins (take one)
//  
//  TODO 
//  - multi grid gaps (media queries and sub grids etc.)
// ==========================================================


//  global grid variables (☠ = don't touch)
$☠__ms-col-gap: null;
$☠__ms-row-gap: null;
$☠__ms-col-count: null;
$☠__ms-row-count: null;


//
//  repeat function
//
@function repeat($repeat, $stuff: 1fr){
    $list: ();
    @for $i from 1 through $repeat { $list: append($list, $stuff, space); }
    @return $list;
}

//
//  grid-column mixin 
//
@mixin grid-column($start: auto, $span: 1){
    //  grid-column-gap using left margin 
    @if $☠__ms-col-gap and not $☠__ms-col-count and $start != 1 {
        margin-left: $☠__ms-col-gap;
        @supports (grid-column-gap: 1px){ margin-left: 0; }
    }     
    -ms-grid-column: if($☠__ms-col-count, $start + $start - 1, $start);
    -ms-grid-column-span: if($☠__ms-col-count, $span + $span - 1, $span);
    grid-column: #{$start}/#{$start + $span};       
}

//
//  grid-row mixin
//
@mixin grid-row($start: auto, $span: 1){
    //  grid-row-gap using top margin 
    @if $☠__ms-row-gap and not $☠__ms-row-count and $start != 1 {
        margin-top: $☠__ms-row-gap;
        @supports (grid-row-gap: 1px){ margin-top: 0; }
    } 
    -ms-grid-row: if($☠__ms-row-count, $start + $start - 1, $start);
    -ms-grid-row-span: if($☠__ms-row-count, $span + $span - 1, $span);
    grid-row: #{$start}/#{$start + $span};
}


//
//  grid-cell mixin
//
@mixin grid-cell($col-start: auto, $col-span: 1, $row-start: auto, $row-span: 1){
    @include grid-column($col-start, $col-span);
    @include grid-row($row-start, $row-span);    
}


//
//  grid-area mixin 
//
@mixin grid-area($area){
    $area: map-get($grid-areas, $area);
    @include grid-column(nth($area, 1), nth($area, 2));
    @include grid-row(nth($area, 3), nth($area, 4));    
}

//
//  grid mixin 
//
@mixin grid($grid-map){
    $cols: map-get($grid-map, cols);
    $rows: map-get($grid-map, rows);    
    $gap:  map-get($grid-map, gap);    
    $col-gap:  map-get($grid-map, col-gap);        
    $col-gap: if($col-gap,$col-gap,$gap);
    $row-gap:  map-get($grid-map, row-gap);
    $row-gap: if($row-gap,$row-gap,$gap);    

    //  if cols or rows are numbers convert to fraction lists
    @if $cols and length($cols) == 1 and unitless($cols) { $cols: repeat($cols); }
    @if $rows and length($rows) == 1 and unitless($rows) { $rows: repeat($cols); }    

    //  ie does not support grid gap - why we insert the gap space as a row or colum
    //  note! the first loop is to ensure cols/rows are not a multidimensional list
    //  (when generated by the repeat function) 
    $ms-cols: null;
    $ms-rows: null;    
    @if $col-gap and $cols{
        $ms-cols: ();
        @each $col in $cols { $ms-cols: if( type-of($col) == list, join($ms-cols, $col), append($ms-cols, $col)); }
        @for $i from 1 through length($ms-cols) - 1{ $ms-cols: set-nth($ms-cols, $i, nth($ms-cols,$i) $col-gap); }
        //  globalize ms col count (used by grid-column)
        $☠__ms-col-count: length($ms-cols) !global;        
    }
    @if $row-gap and $rows{
        $ms-rows: ();        
        @each $row in $rows { $ms-rows: if( type-of($row) == list, join($ms-rows, $row), append($ms-rows, $row)); }
        @for $i from 1 through length($ms-rows) - 1 { $ms-rows: set-nth($ms-rows, $i, nth($ms-rows,$i) $row-gap); }

        //  globalize ms row count (used by grid-row)
        $☠__ms-row-count: length($ms-rows) !global;
    }
    // 
    $☠__ms-col-gap: $col-gap !global;
    $☠__ms-row-gap: $row-gap !global;


    display: -ms-grid;    
    display: grid;

    -ms-grid-columns: $ms-cols or $cols;
    -ms-grid-rows: $ms-rows or $rows;    

    grid-template-columns: $cols;
    grid-template-rows: $rows;    

    grid-column-gap: $col-gap;
    grid-row-gap: $row-gap;    
}


//  Simple reset  
html { box-sizing: border-box; } 
*,*::before,*::after { box-sizing: inherit; }
body { margin: 0; }



//  How many buttons de we have we'll need this to 
//  place each button on it's own row (needed in ie)
$number-of-buttons: 5;

//  Create a grid map for the grid mixin
$grid: (
    cols: 12,
    gap: .5em
);  

//  Include the grid on the wrapping element
.my-wrap {
    @include grid($grid);
}

//  Position all details sections on top of eachother and 
//  make them span accross one more row than the number of
//  buttoms we have. The extra row will be the flexible 
//  part making sure buttons stay unaffected. 
.details {
    @include grid-cell(4, 12, 1, $number-of-buttons + 1);
}

//  Add the same columns span to all buttons and use 
//  a loop to create row position individually
.button {
    @include grid-column(1,3);
    @for $i from 1 through $number-of-buttons {
        &:nth-of-type(#{$i}n){ @include grid-row($i,1);}
    }
}



//  Show hide details using not target with a bit of animation
.details { 
    transition: opacity 300ms;
}
.details:not(:target) {
    opacity:  0;
    z-index: -1;
    pointer-events: none;    
}



//  Just a bit of styling
body { 
    padding: 1em; 
    background-color: whitesmoke; 
    font-family: sans-serif;
}
.details {
    padding: 0.5rem 1rem;
    background-color: white;
    border:1px solid lightgray;
}
.button {
    display: block;
    background-color: #333;
    color: white;
    text-decoration: none;
    padding: 0.5rem 1rem;
    :target + & { color: gold; }
}