nishanths/jsbin.bazisoyopa.1.html

## jsbin.bazisoyopa.1.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>table-cell</title>
    <style>
      ul {
        background: red; /* purely for visualizing */
      }
      li.i {
        display: table-cell;
      }
      li {
        display: inline-block;
        height: 60px;
      }
    </style>
  </head>
  <body>
    <script>
      console.log(`
        on Chrome:
        (1) notice the initial height
        (2) click on "toggle" to toggle the "display: table-cell" property
        (3) the initial height isn't restored when you toggle
      `);
    </script>
    <button id="b">toggle</button>
    <ul>
      <li class="i"></li>
      <li class="i"></li>
    </ul>
    <script>
      var li = document.querySelector("li");
      function toggle() { li.classList.toggle("i"); }
      b.addEventListener("click", toggle);
    </script>
  </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>table-cell</title>
	<style>
	ul {
	background: red; /* purely for visualizing */
	}
	li.i {
	display: table-cell;
	}
	li {
	display: inline-block;
	height: 60px;
	}
	</style>
	</head>
	<body>
	<script>
	console.log(`
	on Chrome:
	(1) notice the initial height
	(2) click on "toggle" to toggle the "display: table-cell" property
	(3) the initial height isn't restored when you toggle
	`);
	</script>
	<button id="b">toggle</button>
	<ul>
	<li class="i"></li>
	<li class="i"></li>
	</ul>
	<script>
	var li = document.querySelector("li");
	function toggle() { li.classList.toggle("i"); }
	b.addEventListener("click", toggle);
	</script>
	</body>
	</html>