html - li 不会在 IE 中正确 float

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类，它们只有颜色设置

网站可以查看here

Answer 1

您有 HTML 错误。连续有几个列表项执行此操作:

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

注意未关闭的<span> .您为每个列表项打开一个新跨度，但不要关闭它。可能还有其他问题。总是validate your HTML在指责浏览器之前。它在其他浏览器中看起来正常的原因很可能是因为它们处理错误的方式不同。