css - 在IE quirks模式下在li标记内垂直对齐多行文本

我正在尝试找到一种最能跨浏览器的解决方案，以垂直对齐可跨越li标签内多行的文本。



我阅读了很多有关该主题的文章，并根据几个线程汇编了以下小提琴http://jsfiddle.net/xRC3y/15/上的代码。这适用于大多数浏览器，但是在IE上通过开发者工具以怪癖模式推送时，它呈现如下：



我正在努力寻找一种也可以在IE怪癖模式下工作的解决方案，我们将不胜感激。

最佳答案

我最近有一个类似的问题。这个问题可能有一个更优雅的解决方案，但是我解决该问题的方法是使用一些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);
    }
}
}