嵌套DIV缩小为内容

Question

我正在尝试使用一种已知方法使我的DIV水平居中于另一个DIV内部，而不知道嵌套DIV上的内部DIV宽度（缩小到内容方法）。

以下是HTML：

<div class="my-container">
    <div class="my-wrapper">
        <div class="item">
            <span>My Item</span>
        </div>
    </div>
</div>

这是CSS：

div.my-container {
    width: 300px;
    height: 100px;
    padding: 100px 0 0 0;
    border: 1px solid #000;
}

div.my-wrapper {
    background-color: blue;
    text-align: center;
}

div.item {
    display: inline-block;
    padding: 0 20px;
    background-color: pink;
}

div.item span {
    display: inline-block;
    height: 50px;
    background-color: red;
}

关于jsFiddle的测试用例： http://jsfiddle.net/ThZxx/2/

在所有浏览器中看起来都很好：

除了Internet Explorer 7：

看起来粉红色的DIV （div.item）并没有收缩到内容并占用父容器中的所有可用空间。

我该如何解决这个问题？

Answer 1

IE7存在问题，因为它不支持display: inline-block。您必须为IE添加条件样式，将其更改为display: inline。

<!--[if IE 7]>
div.item { display: inline; }
<![endif]-->

Answer 2

将div.item更改为：

div.item {
    display: inline-block;
    padding: 0 20px;
    background-color: pink;
    *display: inline;
    zoom: 1;
}

在额外显示样式前添加*可防止其他浏览器使用该样式。只有IE会解析并应用它。

Answer 3

IE7不能正确理解内联块，但是通过添加zoom来修复它是一个简单的方法：1;和*显示：内联;对你的css，像这样：

div.item {
    display: inline-block;
    padding: 0 20px;
    background-color: pink;
    zoom:1;
    *display: inline;
}

您可以阅读有关该问题的更多信息，以及此处的修复： http://flipc.blogspot.ca/2009/02/damn-ie7-and-inline-block.html