Question

CSS不是我的强项，我不确定IE6中的列表项目是怎么回事。我希望它们垂直对齐，但第一个列表项总是被推到一个像素或两个两个远的右边，所以它不再与列表中的其他成员对齐。就我而言，这个列表在IE7 / 8，FF3和Chrome 2（所有在Windows上）都很好。

以下是IE6中的样子......请注意Vangala的条目不正确缩进：

alt text http://img254.imageshack.us/img254/8123/ie6liindent.png

这是我的相关CSS：

.organizer-label {
    float: left;
    width: 145px;
}

.organizer-value {
    margin-left: 150px;
}

.organizer-value ul {
    margin-left: 1em;
    margin-top: 0;
    padding-left: 0;
    padding-top: 0;
    line-height: 1.1em;
}

这是我的相关html：

<div class="organizer-subsection">
  <div class="organizer-label">Committee members:</div>
  <div class="organizer-value">
    <ul>
      <li>Vangala Subrahmanyam, Sai Advantium Pharma Ltd, Pune, India</li>
      <li>Ramaswamy Iyer, Bristol-Myers Squibb, Lawrenceville, USA</li>
      <li>Ragu Ramanathan, Bristol-Myers Squibb</li>
    </ul>
  </div>
</div>

我做了一些愚蠢的事情并且幸运的是它在大多数浏览器中看起来都不错吗？我该怎么做才能使列表在IE6中正确排列？

Answer 1

您需要将hasLayout应用于div .organizer-value

.organizer-value {
    margin-left: 150px;
    zoom:1;
}

Answer 2

这是一个浮动bug。您可以通过将 ul 嵌套在包装器 div 中来徘徊;

<div class="organizer-subsection">
  <div class="organizer-label">Committee members:</div>
  <div class="organizer-value">
    <div>
       <ul>
          <li>Vangala Subrahmanyam, Sai Advantium Pharma Ltd, Pune, India</li>
          <li>Ramaswamy Iyer, Bristol-Myers Squibb, Lawrenceville, USA</li>
          <li>Ragu Ramanathan, Bristol-Myers Squibb</li>
        </ul>
     </div>
   </div>
</div>

并将.organizer-value定义更改为此;

.organizer-value {
    float:left;
}

浮动在IE中是邪恶的（就像CSS那样远程有用）。这些常见错误的优点在于它们的记录相当完善。 PositionIsEverything是一个有用的网站，可帮助解决IE显示错误。

Answer 3

看起来你的CSS有些肮脏。如果我有这个权利，我希望我有，你希望委员会成员名单在“委员会成员”的右侧列出

使用IE6，我倾向于避免在可能的情况下使用边距，因为那里有一些有趣且有趣的错误，对于那些粗心的开发人员来说。

以下内容可能会对您有所帮助，但我不能诚实地说明它会对您网页的其他部分做些什么。

.organizer-label {
    float: left;
    width: 145px;
}

.organizer-value {
    padding-left: 5px;
    float: left;
}

.organizer-value ul {
    margin-left: 1em;
    margin-top: 0;
    padding-left: 0;
    padding-top: 0;
    line-height: 1.1em;
}

希望这有帮助

R上。

Answer 4

尝试“.organizer-value {overflow：hidden; float：left;}”

希望这有帮助

Answer 5

从这里的another question来看，人们引用了IE7-js library。它应该使IE6的行为类似于符合标准的浏览器。这也可能会修复你的间距问题

IE6怪异 - 第一个列表项目缩进太远了

5 个答案: