1

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

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

http://jsfiddle.net/grimmus/jUFMJ/

      <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 分配特定的宽度。

有谁知道我可以使列表项扩展以适合没有特定宽度的子元素的方法？

4

1 回答 1

0

好吧，你有一大堆特定于 IE7 的 hacks（即*hacks），但老实说，其中一些让事情变得更糟而不是更好。

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

只需禁用几段被黑的 CSS 代码，我就能让事情变得更好。

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

并.items li .outerContainer .innerContainer .element,.items li .outerNumber .innerNumber .element指定top:-50%. 这就是将您的大部分内容推出其盒子顶部的原因。如果我禁用它，内容会重新出现在视图中。不完全在正确的位置，但可见和可用。

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

删除这些 hack 将使您的菜单在 IE7 中可用。它看起来并不完美，但它可以使用。就我个人而言，我会把它留在那里。您说您需要该网站在 IE7 中工作；它会起作用的。它可能看起来不像其他浏览器那么漂亮，但它会工作。

如果您确实需要在 IE7 中使其像素完美，那么是的，您可能需要一些 IE7 hack。与您已经尝试过的不同！你需要对他们更微妙一点。也许只是调整padding-topon.element或类似的东西将文本向下移动到更中心的位置。

希望有帮助。

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

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

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

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

于 2013-06-12T19:53:30.760 回答