CSS li 项目在 IE7 中显示不正确

Question

我有一个具有以下 CSS 类的

元素：

.css_admin_ul {
    background-color: #ffffff;
    padding: 12px;
}

有 2 个

元素具有以下 CSS：

.css_admin_li {
    display: inline-block;
    width: 50%;
    vertical-align: top;
    margin: 0;
    padding: 0;
}

问题是元素在 IE8 和 Firefox 中显示正常，但在 IE7 中不显示。

布局应该是这样的：

-------------------------------------------
|     CONTENT LI 1    |    CONTENT LI 2   |
-------------------------------------------

在 IE8、Firefox 和 Safari 中就是这种情况，但在 IE7 中显示如下：

-----------------------
|     CONTENT LI 1    |
-----------------------
|     CONTENT LI 2    |
-----------------------

所以它们不在 1 行中。

谁知道导致此问题的原因以及如何解决此问题？

提前致谢！

编辑：

UL所在的css是：

.css_div_tabcontrol_content{
 padding: 12px;
}

Answer 1

inline-block 是 buggy in IE7。

我建议您使用float:left; 作为简单的解决方案（可能然后将overflow:auto; 应用于UL），或使用display: inline; 和其他一些赋予魔法巫术的属性hasLayout - 传统上是@987654327 @ 或固定的高度/宽度尺寸。

Answer 2

可能，

display:inline;

应该可以解决问题。

或者你可以float:left;<UL>和float:left;都在<LI>s之内。

你可以看看here。

Answer 3

我认为你应该这样做。

.css_admin_ul {
    background-color: #ffffff;
    padding: 12px;
    overflow: hidden;
}

.css_admin_li {
    float: left;
    width: 50%;
    vertical-align: top;
    margin: 0;
    padding: 0;
}

添加 float: left; 没有意义和 display: 块到同一个元素。