ページ内リンクが日本語だとIEでリンクが効かない

ページ内リンクのハッシュ部分にエンコードした文字列を指定していたのですが、IEでだけページ内リンクが効かないようだったので備忘録としてメモしておきます。
確認したのはIE11になります。

サンプルコード

まずはエンコード前の日本語でページ内リンクを設定してみます。

HTML

<ul class="nav">
	<li><a href="#セクション1">セクション1</a></li>
	<li><a href="#セクション2">セクション2</a></li>
	<li><a href="#セクション3">セクション3</a></li>
	<li><a href="#セクション4">セクション4</a></li>
</ul>
<div id="contents">
	<div class="section" id="セクション1">
		<h2>セクション1</h2>
	</div>
	<div class="section" id="セクション2">
		<h2>セクション2</h2>
	</div>
	<div class="section" id="セクション3">
		<h2>セクション3</h2>
	</div>
	<div class="section" id="セクション4">
		<h2>セクション4</h2>
	</div>
</div>

この場合はページ内リンクは問題なく効いています。
エンコード前の日本語でのデモページ
　

次にエンコード後の日本語でページ内リンクを設定してみます。

HTML

<ul class="nav">
	<li><a href="#%e3%82%bb%e3%82%af%e3%82%b7%e3%83%a7%e3%83%b31">セクション1</a></li>
	<li><a href="#%e3%82%bb%e3%82%af%e3%82%b7%e3%83%a7%e3%83%b32">セクション2</a></li>
	<li><a href="#%e3%82%bb%e3%82%af%e3%82%b7%e3%83%a7%e3%83%b33">セクション3</a></li>
	<li><a href="#%e3%82%bb%e3%82%af%e3%82%b7%e3%83%a7%e3%83%b34">セクション4</a></li>
</ul>
<div id="contents">
	<div class="section" id="%e3%82%bb%e3%82%af%e3%82%b7%e3%83%a7%e3%83%b31">
		<h2>セクション1</h2>
	</div>
	<div class="section" id="%e3%82%bb%e3%82%af%e3%82%b7%e3%83%a7%e3%83%b32">
		<h2>セクション2</h2>
	</div>
	<div class="section" id="%e3%82%bb%e3%82%af%e3%82%b7%e3%83%a7%e3%83%b33">
		<h2>セクション3</h2>
	</div>
	<div class="section" id="%e3%82%bb%e3%82%af%e3%82%b7%e3%83%a7%e3%83%b34">
		<h2>セクション4</h2>
	</div>
</div>

この場合、IEでページ内リンクが効いていませんでした。
エンコード後の日本語でのデモページ

あまりこういった状況はないと思いますが、WordPressでスラッグ名をページ内リンクで利用しようとした時に遭遇しました。