0

我正在尝试在 Windows 应用程序和 Chrome 网络浏览器中使用它，但网络浏览器不显示canvasButtonsdiv。我希望canvasButtons显示在 下方#canvasDiv。该overflow:hidden属性导致它不显示。但它可以作为 Windows 应用程序正常工作。是否有任何等效的 ms-grid ？

.container {
    -ms-grid-rows: 1fr auto;
    -ms-grid-columns: 1fr;
    display: -ms-grid;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}
.canvasEle {
    -ms-grid-column: 1;
    -ms-grid-row: 1;
}
.canvasButtons {
    -ms-grid-column: 1;
    -ms-grid-row: 2;
    width: 100%;
    height: 60px;     
    display: flex;  
    justify-content: center;
    -ms-flex-pack: center; 
}

 <div style="overflow:hidden">   
        <div class="container">
            <div id="canvasDiv">
               <canvas width="510" height="370" class="canvasEle"></canvas>
            </div>
            <div class="canvasButtons" >

                   <div class="button" onClick= handler()>
                        ....
                   </div>

                   <div class="button" onClick = handler()>

                   </div>
            </div>
            <div class="flyouts" >.....</div>
        </div>
    </div>

我尝试使用display: flex该canvasButtons部分，但即使这样也效果不佳。div 得到了我想要的canvasButtons对齐，但点击处理程序后来没有工作。

4

2 回答 2

0

解决方案是将以下内容添加到控件 div - 底部：0px，位置：绝对

于 2015-01-21T21:12:19.863 回答
0

只是为实际问题添加一个答案（“是否有等价物-ms-grid）：是的 - 有点。最新版本的网格布局模块是在“实验网络平台功能”后面的 Blink/Chrome Canary（2015 年 12 月）中实现的"-flag，在 WebKit 夜间版本和 Firefox 的预览版本（开发版等）中。

请注意，IE10+ 和 Edge 中的前缀版本基于旧规范，具有相似的基本功能——例如，您问题中的布局将工作相同，没有-ms-prefix——但新规范具有更多功能。

只要规范没有发生什么大事，它很可能会在 2016 年在所有上述浏览器中发布。

于 2015-12-18T20:00:14.640 回答