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。它在其他浏览器中看起来很好的原因很可能是因为它们以不同的方式处理错误。

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

li将无法在IE中正确浮动

2 个答案: