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

Question

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

我阅读了很多有关该主题的文章，并根据几个线程组装了可以在以下 fiddle 上找到的代码 http://jsfiddle.net/xRC3y/15/ .这适用于大多数浏览器，但是在 IE 上，当通过开发人员工具以怪癖模式推送时，它呈现如下:

我正在努力寻找一个也适用于 IE 怪癖模式的解决方案，感谢任何帮助

Answer 1

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

另外，我知道这不是检测用户是否使用 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);
    }
}
}