在IE7中垂直对齐多行文本答案

【问题标题】：Vertically aligning multiple lines of text in IE7在IE7中垂直对齐多行文本
【发布时间】：2011-11-25 23:20:43
【问题描述】：

我试图在 IE7 中垂直对齐文本被证明是没有 display: table; 和 display: table-cell; 的 css 选项的 PITA

这是一个类似这样的导航：

<ul>
    <li><a href="#"><span>Text covers one line</span></a></li>
    <li><a href="#"><span>Text covers two lines, problem occurs</span></a></li>
</ul>

CSS：

ul li a{ display: table; zoom: 1; width: 240px; height: 30px;}
ul li a span{ width: 200px; display: table-cell; zoom: 1; vertical-align: middle; padding: 0 30px 0 20px; }

适用于较新的浏览器。我可以只用一行文本轻松地将文本居中，但是当它变为两行时，我似乎无法正常工作。

【问题讨论】：

您意识到您的跨度没有正确关闭？
如果正确关闭 span 并不能解决问题，您介意使用 JavaScript 吗？这是我能想到的唯一方法，没有每个
上的一些 hacky CSS 类和一些后端逻辑来计算字母。

【解决方案1】：

我知道这里有很多讨厌餐桌的人（而且很多人显然是有道理的）。但是您必须支持 IE7 作为一项要求 - 显然我们不会在这里使用最新的技术。

所以，如果你不能让它与有限的 CSS 集一起工作，为什么不直接实际使用一个表格？如果你必须支持来自 2006 的浏览器，那将是妥协.尽管这样说让我很伤心：有时你必须深吸一口气，把标准扔出窗外，然后对自己说：“如果它有效，它就有效。”

【讨论】：

是的，很糟糕，感谢您的回复，它可能是唯一的非 js 解决方案。

【解决方案2】：

我知道有两种解决方案，但每种都有其小的不适。请查看显示两者的 this demo fiddle。

第一个解决方案基于this answer，它的缺点是可点击区域被压缩为仅文本，并且没有扩展到列表项边界。我想这不是什么大问题，因为用户可能会点击文本而不是旁边的文本。

第二种解决方案基于this answer，它的缺点是您需要在标记中添加一个额外元素。我选择了<ins> 标记，但您可以使用任何其他内联元素。

【讨论】：

【解决方案3】：

如果我正确理解您的任务，则绝对没有必要使用表格。主要原因是如果你有很多li元素超过了你的页面宽度，你肯定会遇到让它们包裹得很好的问题。

那么，这就是你想要达到的目标吗？

http://jsfiddle.net/EK357/

解决方案基于：http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/

简而言之，您必须为每个 li 元素设置以下规则：

li {
    display: inline-block;
    display: -moz-inline-box; /* Firefox < 3.5 */
    *display: inline; /* IE */
    zoom: 1;

    vertical-align: middle;
    margin-right: -.3em;
}

但请注意，每个 inline-block 元素之后都有一个额外的空格（这就是 margin-left: -.3em 的用途。

【讨论】：