空の回廊 - 時々web・創作系 -

独りよがりなWebLog(たまにTemporary)

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

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

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

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

<nav id="●●●"><!--
--><li><a href="○○○.html"><img src="xxx.jpg" alt=""></a></li><!--
--><li><a href="○○○.html"><img src="xxx.jpg" alt=""></a></li><!--
--><li><a href="○○○.html"><img src="xxx.jpg" alt=""></a></li><!--
--><li><a href="○○○.html"><img src="xxx.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は無くても行けるかも? */
  }
}