Chrome 中的 CSS ms-grid 等效项答案

【问题标题】：CSS ms-grid equivalent in ChromeChrome 中的 CSS ms-grid 等效项
【发布时间】：2015-01-20 05:01:44
【问题描述】：

我正在尝试在 Windows 应用程序和 Chrome 网络浏览器中使用它，但网络浏览器不显示 canvasButtons div。我希望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 部分，但即使这样也效果不佳。 canvasButtons div 已按我的意愿对齐，但点击处理程序稍后无法正常工作。

【问题讨论】：

更简洁的表述问题的方式是 -

.....

.....

在删除溢出隐藏属性之前，我看不到控件 div。即使溢出被隐藏，我怎样才能让它显示出来。有没有办法可以缩小画布，让两者都适合？

标签： css google-chrome canvas css-grid

【解决方案1】：

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

【讨论】：

【解决方案2】：

只是为实际问题添加一个答案（“是否有等价于 -ms-grid 等）：是的 - 有点。最新版本的 Grid Layout module 在后面的 Blink/Chrome Canary（2015 年 12 月）中实现“Experimental web platform features”-标志，在 WebKit nightly builds 和 Firefox Preview builds（Developer edition 等）中。

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

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

【讨论】：