我有一个< 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;
}
答案 0 :(得分:1)
inline-block
是buggy in IE7。
我建议你使用float:left;
作为简单的解决方案(可能然后将overflow:auto;
应用于UL),或使用display: inline;
和其他一些赋予神奇伏都教的属性{ {3}} - 传统的zoom:1
或固定的高度/宽度尺寸。
答案 1 :(得分:0)
答案 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:阻止相同的元素。