2017-09-25 4 views
-5

CSSでdisplay = gridを使用しています。 Chrome & Firefoxでは正常に動作しますが、IEでは動作しません。 CSSトリックやその他のソリューション?IEでdisplay = gridが機能しないのはなぜですか?

+0

IEのバージョンは? – JJJ

+0

何が問題なのですか? –

+1

'display:grid'はIE11でのみ動作しています –

答えて

1

display:-ms-grid;ブロックレベルグリッド要素

display:-ms-inline-grid;インラインレベルのグリッド素子https://msdn.microsoft.com/en-us/library/hh673533(v=vs.85).aspx

から

ためグリッドレイアウトの基本的なビルディング・ブロックであるため(いずれか-msグリッドへの要素の表示プロパティを設定することによって宣言されたグリッド素子、ブロックレベルのGrid要素)または-ms-inline-grid(インラインレベルのGrid要素の場合)。 (グリッドレイアウトドラフトの初期状態のため、この値とこのセクションのすべてのプロパティは、Internet Explorer 10およびWindowsストアのJavaScriptを使用したアプリケーションで使用する場合は、Microsoft固有のベンダー接頭辞 "-ms-"とともに使用する必要があります)は、Windows 8の

2

の指定例:

#grid_container { 
    display: -ms-grid 
    display: grid 
    ... 
} 
<div id="grid_container"> 
    ... 
</div> 

ます現在、Internet ExplorerおよびWindows上のエッジだけでなく、Windowsで他のブラウザや他のプラットフォーム用の作業、2017年11月14日のように。

新しいスタイルdisplay propertyは、他のブラウザのために有効になり、そしてMarch 2012 W3 Working Draftからvendor prefixと元Grid elementは、WindowsでInternet Explorerおよびエッジブラウザで使用されます。

これは現在のものです: 2017年11月14日:
IE 11.726.15063.0更新11.0.48
エッジ40.15063.674.0
のWindows 1703 15063.726をビルドします。

でテストされました。ハイシエラのChrome、Firefox、Safari、およびVivaldi:
,0535164106174510
Android携帯のChrome、Firefox、Samsung Cloud(モバイルブラウザ)。そして
のWindows 10で クロム、Firefoxの、Internet Explorer、およびエッジ

私もまだ例を使用しています:以前の研究あたり

-ms-grid-column: 2; 
-ms-grid-column-span: 1; 
-ms-grid-row: 1; 
grid-column: 2/3; 
grid-row: 1; 

を、すなわちRachel Andrew

私はこれは少しであると認識私はそれが誰かを助けることを願っています。

関連する問題