[Stackoverflow] IE11 display none

https://stackoverflow.com/q/47053286/8554766

HTML

<body>
<div id='content'>
<div class='menu' id='menu'></div>
<div class='content-area'>
<button onclick=toggleDisplay() >Show/hide 'display:none'</button>
</div>
</div>

</body>

CSS

#content {
  display: -ms-grid;
  display: grid;
  
  -ms-grid-columns: 15% minmax(85%, 1fr);
  grid-template-columns:  15% minmax(85%, 1fr);
  
  -ms-grid-rows: 1fr;
  
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
}


.menu {
  background: #D2691E;
  display: none;
  
  -ms-grid-row: 1;
  grid-row-start: 1;
  
  -ms-grid-row-span: 1;
  grid-row-end: 1;

}

.content-area {
  background: #191970;
  
  -ms-grid-row: 1;
  grid-row-start: 1;
  
  -ms-grid-row-span: 1;
  grid-row-end: 1;
  
  -ms-grid-column: 2;
  grid-column-start: auto;
  
  -ms-grid-column-span: 2;
  grid-column-end: span 2;
}

JavaScript

function toggleDisplay() {
	var menu_div = document.getElementById('menu');
  if (menu_div.style.display === '' || menu_div.style.display === 'none') {
  	menu_div.style.display = 'inline'
  } else {
  	menu_div.style.display = 'none'	
  }
}