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

时间:2010-12-23 09:53:13

标签: css internet-explorer internet-explorer-7 internet-explorer-6

我有一个< ul>具有以下CSS类的元素:

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

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

3 个答案:

答案 0 :(得分:1)

inline-blockbuggy in IE7

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

答案 1 :(得分:0)

可能地,

display:inline;

应该这样做。

或者您可以float:left; <UL>以及float:left;所有<LI>s

您可以查看here

答案 2 :(得分:0)

你应该这样做我认为。

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