gojs图未在IE11中显示

Question

我用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;
}

Answer 1

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

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

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();
    }

Answer 2

除非还将外部图元设置为具有容纳高度，否则无法设置height: 100%。

通常情况下，但并不总是如此，您只需要在CSS中添加：

html, body {
  height:100%;
}