Question

我有一个＆lt; ul＆gt;具有以下CSS类的元素：

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

有2＆lt; li>具有以下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    |
-----------------------

所以他们不在彼此旁边的一行。

谁知道造成这个问题的原因以及如何解决这个问题？

提前致谢！

编辑：

UL所在的CSS是：

.css_div_tabcontrol_content{
 padding: 12px;
}

Answer 1

inline-block是buggy in IE7。

我建议你使用float:left;作为简单的解决方案（可能然后将overflow:auto;应用于UL），或使用display: inline;和其他一些赋予神奇伏都教的属性{ {3}} - 传统的zoom:1或固定的高度/宽度尺寸。

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：阻止相同的元素。

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

3 个答案: