是否有为 Internet Explorer 10 呈现 Grid-Gap CSS 属性的解决方法？答案

【问题标题】：Is there a workaround for rendering Grid-Gap CSS properties for Internet Explorer 10?是否有为 Internet Explorer 10 呈现 Grid-Gap CSS 属性的解决方法？
【发布时间】：2019-11-22 15:30:59
【问题描述】：

我正在尝试设置一个函数来简化网格样式的生成。在下面的 JS 部分中，函数 gridColRowStyler 接受值并为每个网格子元素输出嵌入样式。我遇到的唯一主要问题是尝试为 IE 10 的“grid-gap”属性构建一个解决方法。我尝试在 IE 特定媒体查询中使用margin 属性，但似乎重叠边距在 IE 中不会崩溃10. 谁能给点建议？请参阅下面的代码和Codepen。谢谢。

<!DOCTYPE html>
<html>
  <head>
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
  </head>
  <body>
    <div class="main-container">
      <div class="container" style="border:1px solid red;">
        <div class="grid_tl" style="border:1px dotted blue;">
          <a href="#" style="opacity:0.25;display:block;border:4px double black;"><img src="https://via.placeholder.com/612x959/e1e1e1/808080?text=zone1" width="612" height="959" style="opacity:0.25;width:612px;height:959px;" /></a>
          <a href="#" style="opacity:0.25;display:block;border:4px double green;"><img src="https://via.placeholder.com/612x959/e1e1e1/808080?text=zone2" width="612" height="959" style="opacity:0.25;width:612px;height:959px;" /></a>
          <a href="#" style="opacity:0.25;display:block;border:4px double orange;"><img src="https://via.placeholder.com/612x2009/e1e1e1/808080?text=zone3" width="612" height="2009" style="opacity:0.25;width:612px;height:2009px;" /></a>
          <a href="#" style="opacity:0.25;display:block;"><img src="https://via.placeholder.com/612x2009/e1e1e1/808080?text=zone4" width="612" height="2009" style="opacity:0.25;width:612px;height:2009px;" /></a>
          <a href="#" style="opacity:0.25;display:block;"><img src="https://via.placeholder.com/612x959/e1e1e1/808080?text=zone5" width="612" height="959" style="opacity:0.25;width:612px;height:959px;" /></a>
          <a href="#" style="opacity:0.25;display:block;"><img src="https://via.placeholder.com/612x959/e1e1e1/808080?text=zone6" width="612" height="959" style="opacity:0.25;width:612px;height:959px;" /></a>
          <a href="#" style="opacity:0.25;display:block;"><img src="https://via.placeholder.com/612x959/e1e1e1/808080?text=zone7" width="612" height="959" style="opacity:0.25;width:612px;height:959px;" /></a>
        </div>
      </div>
    </div>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
    <script>
      var gapColWidthPercent,
      gapRowHeightPercent,
      gridColWidthPercent,
      gridRowHeightPercent,
      gridColWidth,
      gridRowHeight,
      gridParentStyles,
      gridChildrenStyles,
      i=0,
      j=0,
      k=0;

      function gridLayoutCSSBuilder(){

      // <!-- Create stylesheet -->
      var grid_tl=document.createElement('style');
      grid_tl.setAttribute('id','gridLayoutBuilder');
      document.head.appendChild(grid_tl);

      // <!-- Create grid parent CSS properties -->
      grid_tl.innerHTML='.grid_tl{display:-ms-grid;display: grid; width: 100%; height: auto;';

      // <!-- CONFIGURE GRID COL/ROW/GAP PROPERTIES -->
      // ARGUMENTS FROM LEFT TO RIGHT
      // NUMBER OF COLUMNS
      // NUMBER OF ROWS
      // PIXEL WIDTH OF PARENT ELEMENT ON DESKTOP
      // PIXEL HEIGHT OF PARENT ELEMENT ON DESKTOP
      // PIXEL WIDTH OF GRID COLUMN GAP ON DESKTOP
      // PIXEL WIDTH OF GRID ROW GAP ON DESKTOP
      gridColsRowsConfigProps(3,3,1140,1531,24,48);

      gridContentAssignIds();

      // <!-- CONFIGURE FOR EMBEDDED CSS STYLESHEET -->
      // ARGUMENTS FROM LEFT TO RIGHT
      // ZONE ID
      // COLUMN TRACK NUMBER
      // NUMBER OF TRACKS TO SPAN
      // ROW TRACK NUMBER
      // NUMBER OF ROWS TO SPAN
      grid_tl.innerHTML += 
      gridParentStyles +
      gridColRowStyler('gridzone_0',1,1,1,1) +
      gridColRowStyler('gridzone_1',2,1,1,1) +
      gridColRowStyler('gridzone_2',3,1,1,2) +
      gridColRowStyler('gridzone_3',1,1,2,2) +
      gridColRowStyler('gridzone_4',2,1,2,1) +
      gridColRowStyler('gridzone_5',2,1,3,1) +
      gridColRowStyler('gridzone_6',3,1,3,1)
      ;
    }

    // <!-- FUNCTIONS -->
    function gridContentAssignIds(){
      // <!-- Capture all content elements -->
      var gridContentElsParent=document.getElementsByClassName('grid_tl')[0];
      var gridContentElsChildren=gridContentElsParent.getElementsByTagName('a');

      // <!-- Assign unique IDs -->
      for(k;k<gridContentElsChildren.length;k++){
        gridContentElsChildren[k].setAttribute('id','gridzone_' + k);
        gridContentElsChildren[k].setAttribute('id','gridzone_' + k);
      }
    }

      function gridColRowStyler(id,colStartingTrackNumber,colSpan,rowStartingTrackNumber,rowSpan){
        // <!-- Configure styles for each content elements -->
        var gridColChildPropsIE= '-ms-grid-column:' + colStartingTrackNumber + ';-ms-grid-column-span:' + colSpan + ';-ms-grid-row:' + rowStartingTrackNumber + ';-ms-grid-row-span:' + rowSpan + ';';
        var gridRowChildPropsNonIE= 'grid-column: ' + colStartingTrackNumber + ' / span ' + colSpan + ';grid-row: ' + rowStartingTrackNumber + ' / span ' + rowSpan + ';';
        var gridColRowChildProps = '#' + id + '{' + gridColChildPropsIE + gridRowChildPropsNonIE + '}';
        return gridColRowChildProps;
      }

      function gridColsRowsConfigProps(gridColQty,gridRowQty,parentWidthPx,parentHeightPx,gapColWidthPx,gapRowHeightPx){
        gapColWidthPercent=(gapColWidthPx/parentWidthPx)*100 + '%';
        gapRowHeightPercent=(gapRowHeightPx/parentHeightPx)*100 + '%';

        var gapColWidthPxTotal=gapColWidthPx*(gridColQty+1);
        var gapRowHeightPxTotal=gapRowHeightPx*(gridRowQty+1);

        var childrenWidthPxTotal=parentWidthPx-gapColWidthPxTotal;
        var childrenHeightPxTotal=parentHeightPx-gapRowHeightPxTotal;

        gridParentStyles = gridTemplateColumnsConfigProps(childrenWidthPxTotal,gridColQty,parentWidthPx,gapColWidthPercent) + ';' + gridTemplateRowsConfigProps(childrenHeightPxTotal,gridRowQty,parentHeightPx,gapRowHeightPercent) + ';' + 'grid-gap: ' + gapColWidthPercent + ' ' + gapRowHeightPercent + ';}';
      };

      function gridTemplateColumnsConfigProps(e1,e2,e3,e4){
        var gridColParentPropsNonIE='grid-template-columns:';
        var gridColParentPropsIE='-ms-grid-columns:';
        gridColWidthPercent=((e1/e2)/e3)*100 + '%';
        while(i<e2){
          gridColParentPropsNonIE+=' ' + gridColWidthPercent;
          gridColParentPropsIE+=' ' + gridColWidthPercent;
          i++;
        }
        var gridColProperty=gridColParentPropsIE + ';' + gridColParentPropsNonIE + ';';
        return gridColProperty;
      };

      function gridTemplateRowsConfigProps(e1,e2,e3,e4){
        var gridRowParentPropsNonIE='grid-template-rows:';
        var gridRowParentPropsIE='-ms-grid-rows:';
        gridRowHeightPercent=((e1/e2)/e3)*100 + '%';
        while(j<e2){
          gridRowParentPropsNonIE+=' ' + gridRowHeightPercent;
          gridRowParentPropsIE+=' ' + gridRowHeightPercent;
          j++;
        }
        var gridRowProperty=gridRowParentPropsNonIE + ';' + gridRowParentPropsIE;
        return gridRowProperty;
      };

      gridLayoutCSSBuilder();
      </script>
  </body>
</html>

【问题讨论】：

标签： javascript css-grid

【解决方案1】：

我在Should I try to use the IE implementation of CSS Grid Layout? 找到了答案。 Rachel Andrew 解释说，

排水沟
稍后添加了 grid-column-gap、grid-row-gap 和 grid-gap 属性。要在 IE Grid 中创建间隙，您需要为装订线创建轨道，然后将项目考虑在内。

所以我在gridTemplateRowsConfigProps 和gridTemplateColumnsConfigProps 函数中考虑了它们，并对grid-column/-ms-grid-column 和grid-row/-ms-grid-row 属性值进行了计算调整。

【讨论】：