代码之家 › 专栏 › 技术社区 › Chris Farmer Marcelo Cantos

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

internet-explorer css

Chris Farmer Marcelo Cantos · 技术社区 · 15 年前

CSS不是我的强项,我也不确定IE6中的列表项是怎么回事。我希望它们垂直对齐,但是第一个列表项总是被向右推一两个像素,因此它不再与列表中的其他成员对齐。据我所知,这个列表在IE7/8、FF3和Chrome2(都在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中正确排列列表?

5 回复 | 直到 15 年前

Emily 15 年前

你需要申请 hasLayout 对div .organizer-value

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

Mathew 15 年前

这是一只漂浮的虫子。你可以在它周围筑巢 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值定义更改为this;

.organizer-value {
    float:left;
}

在IE中浮点数是邪恶的(就像CSS做的任何远程有用的事情一样)。这种常见的错误的好处在于,它们有相当好的文档记录。 PositionIsEverything 是帮助解决IE显示错误的有用网站。

Rosencrantz 15 年前

在你的CSS中看起来有点恶心。如果我有这个权利,我希望我有这个权利,你可以把委员会成员名单放在标题“委员会成员”的右边。

对于IE6,我倾向于尽量避免使用利润率,因为对于不谨慎的开发人员来说,那里有一些有趣的bug。

下面的内容可能对您有所帮助,但我不能诚实地说它会对您的页面的其余部分做什么。

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

希望这有帮助

Chris.Jie 15 年前

尝试“.Organizer值溢出:隐藏;浮点:左;”

希望这有帮助

Community Mike Causer 7 年前

从 another question 在这里,人们提到 IE7-js library . 它应该使IE6表现得像一个符合标准的浏览器,这也可以解决您的间距问题。