Question

我试图在IE7中保持我的div水平对齐时遇到问题，它们在其他所有浏览器中都能正常工作，有没有解决方法？ example

<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

添加float: left

#christmas_promotion_boxes div
{
display:inline-block;
  float:left;
  padding-left: 4px
}

FIDDLE

Answer 2

这是解决方案。

代码更改：

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

<强> WORKING DEMO

Answer 3

旧版IE中的

inline-block仅适用于默认显示类型为inline的元素。用span替换你的div，它应该在IE中工作。

Fiddle

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;
}

Answer 4

写下这个：

#christmas_promotion_boxes div
{
 display:inline;
}

这样可行。

在IE 7中水平对齐Div

4 个答案: