li не будет правильно плавать в IE

Question

У меня очень странная проблема с платой IE (без учета IE6).

По сути, у меня есть список в div с фиксированной шириной.Список содержит ячейки li без высоты или ширины, содержащие ссылку и стилизованный тег span.Ячейки li должны плавать вправо, а тег span - вправо относительно проблемы <a>

, IE не может справиться с этим.И я абсолютно не знаю, с чего начать.

div#all { 
    width: 800px; 
    margin: 0 auto 0 auto;
    }

div#head { 
    width: 800px; 
    margin: 0;
    }

ul { 
    width: 800px; 
    list-style: none; 
    margin: 35px 0 10px 0; 
    padding: 0; 
    }

ul span {
    float: right;
    display: block; 
    height: 18px; 
    width: 18px; 
    margin: 0 0 0 6px; 
    }

li  { 
    float: right;
    margin: 5px 15px;
    padding: 0 0 4px 0;
    border-bottom: 2px solid;
    }

li a {
    float: left;
    }

  <ul>
      <li class="ABC">
      <a href="ABCD">ABCD</a>
      <span class="li-ABC">
      </li>
  </ul>

Игнорировать класс span и класс li, у них просто есть настройки цвета

Сайт можно посмотреть здесь

Answer 1

У вас есть ошибки HTML.Есть несколько пунктов списка, которые делают это:

                <li class="ArabicWorld">
                <a class="menu" href="/Arabic World/Arabic World">
                    العالم العربي
                </a>
                <span class="li-ArabicWorld">
                </li>

Обратите внимание на незамеченное <span>Вы открываете новый диапазон для каждого элемента списка, но не закрываете его.Могут быть и другие проблемы.Всегда проверяйте свой HTML , прежде чем обвинять браузер.Причина, по которой он выглядит нормально в других браузерах, наиболее вероятна, потому что они обрабатывали ошибку по-разному.

Answer 2

Для правильного выравнивания LI в большинстве, если не во всех браузерах, без необходимости использования поплавков, попробуйте следующий пример кода.

<ul>
    <li><a href="#">Link 1</a></li>
    <li><a href="#">Link 1</a></li>
    <li><a href="#">Link 1</a></li>
    <li>Text 1</li>
</ul>


ul {
    margin: 0px;
    padding: 0px;
    list-style: none;
}
li {
    display: inline;
}
li a {
    /* Add any styling you want here for your list item links */
    display: inline-block;
}