Javascript 对于Internet Explorer 10，是否有用于呈现网格间隙CSS属性的变通方法？
我试图设置一个函数来简化网格样式的生成。在下面的JS部分中，函数Javascript 对于Internet Explorer 10，是否有用于呈现网格间隙CSS属性的变通方法？,javascript,css-grid,Javascript,Css Grid,我试图设置一个函数来简化网格样式的生成。在下面的JS部分中，函数gridColRowStyler为每个网格子元素接收值并输出嵌入样式。我遇到的唯一主要问题是试图为IE 10的“网格间隙”属性构建一个解决方案。我曾尝试在IE特定的媒体查询中使用margin属性，但在IE 10中，重叠的边距似乎不会崩溃。有人能给我建议吗？请参阅下面的代码和。多谢各位 <!DOCTYPE html> <html> <head> <link rel="style
gridColRowStylermargin<!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>
var gapColWidthPercent，
加普洛韦，
网格宽度百分比，
网格高度百分比，
网格宽度，
网格高度，
gridParentStyles，
gridChildrenStyles，
i=0，
j=0，
k=0；
函数gridLayoutCSSBuilder（）{
//
var grid_tl=document.createElement（'style'）；
grid_tl.setAttribute（'id'，'gridLayoutBuilder'）；
文件头、附件子项（grid_tl）；
//
grid_tl.innerHTML='.grid_tl{display:-ms grid；display:grid；宽度：100%；高度：auto；'；
//
//从左到右的论点
//列数
//行数
//桌面上父元素的像素宽度
//桌面上父元素的像素高度
//桌面上网格列间距的像素宽度
//桌面上网格行间距的像素宽度
gridColsRowsConfigProps（3,311401531,24,48）；
GridContentAssignId（）；
//
//从左到右的论点
//区域ID
//列轨道号
//要跨越的轨道数
//行轨道号
//要跨越的行数
grid_tl.innerHTML+=
gridParentStyles+
gridColRowStyler（'gridzone_0'，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）
;
}
//
函数gridContentAssignId（）{
//
var gridContentElsParent=document.getElementsByClassName（'grid_tl'）[0]；
var gridContentElsChildren=gridContentElsParent.getElementsByTagName（'a'）；
//
对于（k；k我在上找到了答案。Rachel Andrew解释道
排水沟
稍后添加了网格列间距、网格行间距和网格间距属性。若要在IE网格中创建间距，您需要为边沟创建一个轨迹，然后将其考虑在内放置项目
因此，我在gridTemplateRowsConfigProps
和gridTemplateColumnsConfigProps
函数中对它们进行了说明，并对grid column/-ms grid column
和grid row/-ms grid row
属性值进行了计算调整