0

canvasButtonsこれを Windows アプリと Chrome Web ブラウザーで使用しようとしていますが、Web ブラウザーに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が、それでもうまくいきませんでした。divはcanvasButtons思い通りに配置されましたが、後でクリック ハンドラーが機能しませんでした。

4

2 に答える 2

0

実際の質問 (「等に相当するものはありますか?」) への回答を追加するだけです: はい、そうです。グリッド レイアウト モジュール-ms-gridの最新バージョンは、「実験的な Web プラットフォーム機能」の背後にある Blink/Chrome Canary (2015 年 12 月) に実装されています。 "-flag、WebKit ナイトリー ビルド、および Firefox のプレビュー ビルド (開発者版など)。

IE10+ と Edge のプレフィックス付きバージョンは古い仕様に基づいており、同様の基本機能を備えていることに注意してください。たとえば、質問のレイアウトは - プレフィックスなしで同じように機能します-msが、新しい仕様にはより多くの機能があります。

仕様に大きな変化がない限り、2016 年中に上記のすべてのブラウザーでリリースされる可能性があります。

于 2015-12-18T20:00:14.640 に答える
0

解決策は、コントロール div に続いて追加することでした - 下部: 0px、位置: 絶対

于 2015-01-21T21:12:19.863 に答える