Question

我正在使用需要在IE7中工作的列表中的垂直对齐项目。我一直在this页面上引用代码，它似乎在浏览器上运行良好。

我在IE7中遇到一个问题，第一个列表项没有扩展以适应其中元素的宽度。以下是我的代码的链接。

      <ul>
      <li>
          <div class="outerContainer">
              <div class="innerContainer">
                  <div class="element">
                    <a href="#">
                        To Verify
                    </a>
                  </div>
              </div>
          </div>
          <div class="outerNumber">
              <div class="innerNumber">
                  <div class="element">
                    <a href="#">
                        3903
                    </a>
                  </div>
              </div>
          </div>
      </li>

      <li>
          <div class="outerContainer">
          <div class="innerContainer">
          <div class="element"><a href="#">To Authorize</a></div>
          </div>
          </div>
      </li>

      <li>
          <div class="outerContainer">
          <div class="innerContainer">
          <div class="element"><a href="#">View Payments</</a></div>
          </div>
          </div>
      </li>

      <li>
          <div class="outerContainer">
          <div class="innerContainer">
          <div class="element"><a href="#">To Submit/Modify</a></div>
          </div>
          </div>
      </li>  
  </ul>

列表中的项目将是动态的，因此无法为每个LI分配特定的宽度。

是否有人知道如何使列表项扩展以适合没有特定宽度的子元素？

Answer 1

嗯，你有一堆IE7特定的黑客攻击（即*黑客攻击），但说实话，其中一些正在使事情变得更糟而不是更好。

IE7确实有一些CSS问题，有时CSS黑客是合理的，但我不认为你在这里做的事情真的有帮助。

通过禁用几个被黑客入侵的CSS代码，我能够让事情变得更好。

例如，.items li .outerContainer .innerContainer .element a指定position:absolute，但仅适用于IE7。这完全改变了元素的定位方式，当然也出错了。

.items li .outerContainer .innerContainer .element,.items li .outerNumber .innerNumber .element指定top:-50%。这就是将大部分内容从其顶部推出的原因。如果我禁用它，内容将显示在视图中。不是在正确的地方，但可见和可用。

所以我建议您做的第一件事是删除当前IE7-hacks的所有。他们正在破坏事物，而不是让事情变得更好。

删除这些黑客将使您的菜单在IE7中可用。它看起来不太完美，但它可以使用。我个人就是这样做的。你说你需要该网站在IE7中工作;它会工作。它可能看起来不像其他浏览器那么漂亮，但它会起作用。

如果确实确实需要在IE7中获得完美的像素，那么是的，您可能需要一些IE7黑客攻击。不同于你已经尝试过的那些！你需要对它们更加微妙。也许只需调整padding-top上的.element或类似的内容即可将文字向下移动到更中心的位置。

希望有所帮助。

[编辑] 关于如何解决问题的进一步想法...

你提到padding-top很棘手，因为有些元素超过了两行。这确实难以使用单一样式准确地填充所有元素。如果你事先知道哪些会更长，你可以给别人一个不同的填充，但我意识到这可能有问题。

你可以采取的另一个角度是Javascript。专门为IE7解决这个问题的一小部分javascript实现起来相当简单，并且不需要对其他浏览器产生任何影响。

您还可以考虑使用像ie9.js或Selectivizr这样的JS polyfill库，它会尝试修复旧版IE中的一些CSS问题和缺少的功能。

IE7元素基于子元素进行扩展

1 个答案: