CSS-элемент li не отображается правильно в IE7

Question

У меня есть элемент

• со следующим 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 строке рядом друг с другом.

  Кто знает, что вызывает эту проблему и как я могу это исправить?

  Заранее спасибо!

  РЕДАКТИРОВАТЬ:

  CSS, где находится UL:

  .css_div_tabcontrol_content{
   padding: 12px;
  }
  

Answer 1

inline-block это глючит в IE7 .

Я бы посоветовал вам использовать либо float:left; в качестве простого решения (возможно, затем применить overflow:auto; к UL), либо использовать display: inline; и некоторые другие свойства, которые придают волшебному вуду hasLayout - традиционно zoom:1 или фиксированный размер по высоте / ширине.

Answer 2

Вы должны сделать это таким, я думаю.

.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;и отобразить: блок для того же элемента.

Answer 3

Возможно,

display:inline;

должен сделать трюк.

Или вы можете float:left; <UL>, а также float:left; все <LI>s в пределах.

Вы можете посмотреть на это здесь .