gojs 图在 IE11 中不显示

Question

我在gojs中画了图，图在IE11下不显示，其他浏览器显示正常。系统中还有其他图表，一一展示。

包裹图表 (diagram.div) 的 div 的样式：

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

在 f12 中，我看到 canvas 有属性: "height=1" 与 canvas 有几百个高度的其他浏览器相比。

如果我将 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

您不能设置 height: 100%，除非您还设置了外部元素以具有适合的高度。

通常但并非总是如此，您只需要添加到您的 CSS:

html, body {
  height:100%;
}

Answer 2

根据Make a DIV fill an entire table cell, and Firefox, IE9+ issue with div height 100% inside a td (working example on Chrome)，问题是table中的IE cell没有获取percentage height（必须获取一个固定的数字），所以cabinetMap没有获取value。

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

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

gojs 图在 IE11 中不显示

gojs diagram is not shown in IE11

css

internet-explorer-11

gojs