javascript - 是否有为 Internet Explorer 10 渲染 Grid-Gap CSS 属性的解决方法？-6ren

javascript - 是否有为 Internet Explorer 10 渲染 Grid-Gap CSS 属性的解决方法？

转载作者：行者123 更新时间：2023-11-28 03:22:32

我正在尝试设置一个函数来简化网格样式的生成。在下面的 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>

最佳答案

我在 Should I try to use the IE implementation of CSS Grid Layout? 找到了答案。雷切尔·安德鲁解释说，

Gutters
The grid-column-gap, grid-row-gap and grid-gap properties were added later. To create gaps in IE Grid you will need to create a track for the gutter and then position items taking it into account.

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

关于javascript - 是否有为 Internet Explorer 10 渲染 Grid-Gap CSS 属性的解决方法？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58997322/