li 不会在 IE 中正确浮动

Posted 2023-03-06

【中文标题】li 不会在 IE 中正确浮动

【英文标题】：li won't float correctly in IE

【发布时间】：2011-08-31 07:46:09

【问题描述】：

我在 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

【参考方案1】：

要让 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;

【参考方案2】：

您有 html 错误。一行中有几个列表项执行此操作：

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

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

【讨论】：

是的，就是这样。未闭合的跨度几乎崩溃并烧毁了 IE 的一切。谢谢，有时我只需要另外一双眼睛就可以看到它：D