IE8で画像にmax-widthを設定したが余計な空白が邪魔な場合

例えば以下のサンプル。

<!-- HTML -->
<ul>
    <li><img src="1.jpg" alt="1"></li>
    <li><img src="2.jpg" alt="2"></li>
    <li><img src="3.jpg" alt="3"></li>
    <li><img src="4.jpg" alt="4"></li>
</ul>

/* CSS */
ul > li {
    border:solid 1px red;
    padding:1px;
    display:inline-block;
    *display:inline;
    *zoom:1;
}
ul > li > img {
    max-width:100px;
    max-height:100px;
}

横長の画像ほどなんか空白が現れている。

そこで以下のように、imgを内包するブロック要素のliにも同様のwidth,height指定を行う。

/* CSS */
ul > li {
    border:solid 1px red;
    padding:1px;
    display:inline-block;
    *display:inline;
    *zoom:1;
    max-width:100px;    /* ← here !! */
    max-height:100px;   /* ← here !! */
}
ul > li > img {
    max-width:100px;
    max-height:100px;
}

この通り！

要はIEはバカなので、内包するimgの幅が変わってもブロック要素がその幅に縮まってくれないため、明示的に指定する必要があるということ。