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

Question

I am trying to setup a function to simplify the generation of grid styles.我正在尝试设置一个 function 来简化网格 styles 的生成。 In the JS section below, the function gridColRowStyler takes in values and outputs embedded styles for each of the grid child elements.在下面的 JS 部分中，function gridColRowStyler接受值并为每个网格子元素输出嵌入的 styles。 The only major issue I am experiencing is trying to build a workaround for 'grid-gap' properties for IE 10. I have tried using the margin property in an IE specific media query, but it seems overlapping margins do not collapse in IE 10. Can anyone please advise?我遇到的唯一主要问题是尝试为 IE 10 的“grid-gap”属性构建一个解决方法。我尝试在 IE 特定媒体查询中使用margin属性，但似乎重叠边距在 IE 10 中不会崩溃。有人可以请教吗？ Please see code below and Codepen .请参阅下面的代码和Codepen 。 Thank you.谢谢你。

<!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>

Answer 1

I found my answer at Should I try to use the IE implementation of CSS Grid Layout?我在是否应该尝试使用 CSS 网格布局的 IE 实现？ . . Rachel Andrew explains,雷切尔安德鲁解释说，

Gutters天沟
The grid-column-gap, grid-row-gap and grid-gap properties were added later.稍后添加了 grid-column-gap、grid-row-gap 和 grid-gap 属性。 To create gaps in IE Grid you will need to create a track for the gutter and then position items taking it into account.要在 IE Grid 中创建间隙，您需要为装订线创建轨道，然后将 position 项目考虑在内。

So I accounted for them in the gridTemplateRowsConfigProps and gridTemplateColumnsConfigProps functions and made calculation adjustments for grid-column/-ms-grid-column and grid-row/-ms-grid-row property values.所以我在gridTemplateRowsConfigProps和gridTemplateColumnsConfigProps函数中考虑了它们，并对grid-column/-ms-grid-column和grid-row/-ms-grid-row属性值进行了计算调整。

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

问题描述

1 个解决方案

解决方案1
0 已采纳 2019-11-26 02:15:06

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

问题描述

1 个解决方案

解决方案1 0 已采纳 2019-11-26 02:15:06

解决方案1
0 已采纳 2019-11-26 02:15:06