1

我正在尝试使用一种已知的方法使我的 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)没有缩小到内容并占用父容器中的所有可用空间。

我怎样才能解决这个问题？

4

3 回答 3

2

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

<!--[if IE 7]>
div.item { display: inline; }
<![endif]-->
于 2012-08-24T16:41:14.793 回答
1

将 div.item 更改为：

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

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

于 2012-08-24T16:40:55.523 回答
1

IE7 不能正确理解 inline-block，但是有一个简单的 hack 可以通过添加 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

于 2012-08-24T16:42:04.837 回答