IEだけ画像の下に余白、IEだけ効かないパターン

（liで）画像＋リンクで横並び表示で、
横幅を超えるとで下に流れるレイアウトで

画像の下の余白の対策（vertical-align:bottom;）をしたのに、IEだけそれが効かない現象に遭遇。。

IEだけ適用されるcssで対処しました。
（もっとシンプルな方法があったかもしれないケド…）

<nav id="●●●"><!--
--><li><a href="○○○.html"><img src="ｘｘｘ.jpg" alt=""></a></li><!--
--><li><a href="○○○.html"><img src="ｘｘｘ.jpg" alt=""></a></li><!--
--><li><a href="○○○.html"><img src="ｘｘｘ.jpg" alt=""></a></li><!--
--><li><a href="○○○.html"><img src="ｘｘｘ.jpg" alt=""></a></li><!--
--></nav>

#●●● li{
 display: inline-block;
 margin: 0;
 padding: 0;
}

nav#●●● li a {display: block;}
nav#●●● li a img{vertical-align:bottom;}

@media all and (-ms-high-contrast:none){
  *::-ms-backdrop, #topmenuArea li {
   height: 100px;　/* 高さを見ながら調整 */
  }
  *::-ms-backdrop, nav#●●● li a img {
   display: block; line-height: 1; /* line-heightは無くても行けるかも？ */
  }
}