0

尝试在 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;
}
4

4 回答 4

1
于 2013-11-15T11:16:54.637 回答
0

写这个：

#christmas_promotion_boxes div
{
 display:inline;
}

这将起作用。

于 2013-11-15T11:22:00.017 回答
0

这是解决方案。

代码更改：

#christmas_promotion_boxes {
   width:100%;
   margin:0 auto 0 auto;
   text-align:center;
   display:table-cell;
   float:left;
}
#christmas_promotion_boxes div{
   display:inline;
}

工作演示

于 2013-11-15T11:17:20.017 回答
0

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;
}
于 2013-11-15T11:17:45.827 回答