css - IE 7 で Div を水平方向に揃える

Question

IE7 で div を水平方向に整列させようとすると問題が発生します。他のすべてのブラウザーでは問題なく動作します。回避策はありますか? 例

<div id="christmas_promotion_boxes">
            <div id="christmas_promo_1">
                <img src="http://lilliemcferrin.com/wp-content/uploads/2013/09/vivid_flowers-wide.jpg" width="200" height="100">
            </div>
            <div id="christmas_promo_2">
            <img src="http://lilliemcferrin.com/wp-content/uploads/2013/09/vivid_flowers-wide.jpg" width="200" height="100">
            </div>
            <div id="christmas_promo_3">
                <img src="http://lilliemcferrin.com/wp-content/uploads/2013/09/vivid_flowers-wide.jpg" width="200" height="100">
            </div>
        </div>

#christmas_promotion_boxes {width:1000px; margin:0 auto 0 auto; text-align:center;}
#christmas_promotion_boxes div
{
display:inline-block;
}

Answer 1

inline-block古いバージョンの IE では、デフォルトの表示タイプが である要素に対してのみ機能しますinline。div を に置き換えるspanと、IE で動作するはずです。

フィドル

HTML

<div id="christmas_promotion_boxes">
        <span id="christmas_promo_1">
            <img src="http://lilliemcferrin.com/wp-content/uploads/2013/09/vivid_flowers-wide.jpg" width="200" height="100">
        </span>
        <span id="christmas_promo_2">
        <img src="http://lilliemcferrin.com/wp-content/uploads/2013/09/vivid_flowers-wide.jpg" width="200" height="100">
        </span>
        <span id="christmas_promo_3">
            <img src="http://lilliemcferrin.com/wp-content/uploads/2013/09/vivid_flowers-wide.jpg" width="200" height="100">
        </span>
</div>

CSS

#christmas_promotion_boxes {width:1000px; margin:0 auto 0 auto; text-align:center;}
#christmas_promotion_boxes span
{
    display:inline-block;
}