gojs图在IE11中不显示答案

【问题标题】：gojs diagram is not shown in IE11gojs图在IE11中不显示
【发布时间】：2019-08-01 13:46:55
【问题描述】：

我在gojs中画了一个图，IE11中没有显示该图，但在其他浏览器中正常显示。系统中还有其他的图，都展示出来了。

包裹图表的 div 的样式（diagram.div）：

   position: absolute;
     width: calc (100% - 0.625rem);
     height: 100%;
     z-index: 1000;
     float: right;
     top: 1.25brake;

在 f12 中，我看到画布具有属性：“height=1”，而其他浏览器的画布高度为数百。

如果我将 div 的高度更改为 px 而不是百分比，则图表将照常显示。

元素的结构：

   <div class="cabinets-grid">
    <div class="cabinet-unit">
    <cabinet-map>
    <div class="cabinetMap" id="cabinetDiagram">
    <canvas width="231" height="1" style="..."></canvas>
    <div style="..."></div>
    </div>
    </cabinet-map>
<cabinet-map>
...
</cabinet-map>
    </div>
    </div>

scss：

.cabinets-grid
{
display:table;
border-collapse:collapse;
width: calc(100% - 3.438rem);
height:100%;
margin-left: 3.438;
table-layout:fixed;
}
.cabinet-unit
{
display:table-cell;
position:relative;
}
.cabinetMap {
position:absolute;
width:calc(100% - 0.625rem);
height:calc(100% - 1.5rem);
z-index:1000;
float:right;
top:1.25rem;
}

【问题讨论】：

我尝试检查 Gojs 的示例，它在 IE 11 浏览器上正常运行。您需要发布可以产生问题的示例代码。我们无法使用您的上述 css 代码产生问题。此外，您似乎已经找到了解决该问题的方法。

标签： css internet-explorer-11 gojs

【解决方案1】：

您不能设置height: 100%，除非您还将外部元素设置为具有可容纳的高度。

通常但并非总是您只需要添加到 CSS 中：

html, body {
  height:100%;
}

【讨论】：

我有这个样式设置。

【解决方案2】：

根据Make a DIV fill an entire table cell和Firefox, IE9+ issue with div height 100% inside a td (working example on Chrome)，问题是表格中的IE单元格没有得到百分比高度（它必须得到一个固定的数字），所以cabinetMap没有得到值。

因为表格是动态的，所以我加了一段设置高度的sn-p代码：

const cabinets_grid = this.diagram.div.parentElement.parentElement.parentElement;
const height = cabinets_grid.getBoundingClientRect().height
    if (!height) {
        setTimeout(() => {
            this.calcCabinetHeight(onLoad);
        }, 150);
    }
    else {
        this.diagram.div.style.height = height - 24 + 'px';
        this.zoomToFit();
    }

【讨论】：