css - 在 IE 怪癖模式下垂直对齐 li 标签内的多行文本

Question

我试图找到一个最跨浏览器的解决方案来垂直对齐可以跨越 li 标签内多行的文本。这是一个例子！

我阅读了很多关于该主题的内容，并根据少数线程组装了可以在以下小提琴http://jsfiddle.net/xRC3y/15/上找到的代码。这适用于大多数浏览器，但是在 IE 上，当通过开发人员工具以 quirks 模式推送时，它呈现如下：

我正在努力获得一个在 IE 怪癖模式下也可以工作的解决方案，感谢任何帮助

Answer 1

我最近遇到了类似的问题。这个问题可能有一个更优雅的解决方案，但我解决问题的方法是使用一些 Javascript/jQuery 有条件地设置元素的样式。不幸的是，这需要您通过将类 .vCenterIE7（或其他）添加到要居中的元素并将另一个类 .vCenterIE7Rel 添加到要居中的元素来更改 HTML 标记。

另外，我知道这不是检测用户是否在使用 IE7 的完全可靠的方法（modernizr 更可靠），但是来吧，如果您仍在使用 IE7，您可能没有操纵您的用户代理设置。

脚本：

function vCenterIE7() {
if (navigator.userAgent.toLowerCase().indexOf('msie 7') > -1) {
    var els = $('.vCenterIE7');
    for (var i = 0; i < els.length; i++) {
            var c = els.eq(i);
            var b = c.closest('.vCenterIE7Rel');
            var mtop = b.height() / 2;
            mtop -= c.height() / 2;
            c.css('margin-top',mtop);
    }
}
}