Media Queriesを入れ子にした場合、IEで適用されない

Media Queriesを入れ子にできるのか疑問に思って試してみたところ、IE11で適用されないようだったのでメモ。

サンプルコード

PC版でのみ表示する固定のサイドナビで、ブラウザ高さに応じてナビの高さを調節したい場合を例として試してみます。

HTML

<header class="header">
	<p class="logo"><a href="">ロゴ</a></p>
	<nav class="gnav">
		<ul>
			<li><a href="">メニュー1</a></li>
			<li><a href="">メニュー2</a></li>
			<li><a href="">メニュー3</a></li>
			<li><a href="">メニュー4</a></li>
			<li><a href="">メニュー5</a></li>
			<li><a href="">メニュー6</a></li>
			<li><a href="">メニュー7</a></li>
			<li><a href="">メニュー8</a></li>
			<li><a href="">メニュー9</a></li>
			<li><a href="">メニュー10</a></li>
		</ul>
	</nav>
</header>

CSS

@media (min-width: 768px) {
	.header {
		position: fixed;
		top: 0;
		left: 0;
		width: 200px;
		height: 100%;
		text-align: center;
		background: #cccccc;
	}
	.logo a {
		display: block;
		border-bottom: #999 1px solid;
		padding: 40px 0;
	}
	.gnav a {
		display: block;
		border-bottom: #999 1px solid;
		padding: 20px 0;
	}
	@media (max-height: 800px) {
		.logo a {
			padding: 20px 0;
		}
		.gnav a {
			padding: 15px 0;
		}
	} /* max-height: 800px END */
	@media (max-height: 650px) {
		.logo a {
			padding: 15px 0;
		}
		.gnav a {
			padding: 10px 0;
		}
	} /* max-height: 650px END */
} /* min-width: 768px END */

@media (min-width: 768px) 内に入れ子で @media (max-height: 800px) と @media (max-height: 650px) を記述して、余白を調整するようにしています。
確認すると概ね問題なさそうだったのですが、IIE11だけ入れ子のスタイルが適用されないようでした。
Media Queriesを入れ子にした場合のデモページ

入れ子にしないでandを使って記述する必要があるようです。

CSS

@media (min-width: 768px) {
	.header {
		position: fixed;
		top: 0;
		left: 0;
		width: 200px;
		height: 100%;
		text-align: center;
		background: #cccccc;
	}
	.logo a {
		display: block;
		border-bottom: #999 1px solid;
		padding: 40px 0;
	}
	.gnav a {
		display: block;
		border-bottom: #999 1px solid;
		padding: 20px 0;
	}
} /* min-width: 768px END */

@media (min-width: 768px) and (max-height: 800px) {
	.logo a {
		padding: 20px 0;
	}
	.gnav a {
		padding: 15px 0;
	}
} /* min-width: 768px and max-height: 800px END */

@media (min-width: 768px) and (max-height: 650px) {
	.logo a {
		padding: 15px 0;
	}
	.gnav a {
		padding: 10px 0;
	}
} /* min-width: 768px and max-height: 650px END */

入れ子にしない場合のデモページ