垂直对齐：在IE8的td上居中（在IE7 / FF / Chrome中可以）

Question

我有一个简单的固定宽度表。 第一列的宽度很宽，包含一些简单的文本。 其他列是固定宽度的，并且包含填充的div，其中包含一些更简单的文本。 该表的所有元素均设置为vertical-align：middle。 在IE7 +，FF，Chrome等中，所有内容都能垂直对齐。

然后，我添加了一些JS来切换固定宽度列的显示。 在FF，Chrome，甚至IE7中，所有内容都保持垂直对齐，但是由于某些原因，IE8变得很麻烦。

这是一个演示： http : //www.pinksy.co.uk/table.html

展示：

1. 切换第4列。然后第5列将垂直对齐，就像它仍是旧行的高度一样。
2. 切换第3列。然后将第4列和第5列垂直对齐，好像它仍是旧行的高度一样。
3. 切换第2列。然后，将第3、4和5列垂直对齐，就像它仍然是旧行的高度一样。

因此，这与IE8无法重新计算其余最右边的列相对于新行高的垂直对齐方式有关。

疯狂的是，在IE7中还可以！ 任何想法，不胜感激！

Answer 1

我的IE8在兼容性视图模式下运行。 当我切换到普通模式时，我可以复制您的问题。 我为数字添加了一个嵌套表并对其进行了修复...

<td class="title">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam a pharetra risus. Quisque sodales libero eget diam tincidunt interdum sollicitudin nunc porttitor. Donec bibendum ultrices purus sit amet viverra. Sed in libero quis tellus vehicula mattis sit amet vitae turpis.
</td>
<td>
    <table>
    <tr>
        <td class="num1">
            <div class="val">Num1</div>
        </td>
        <td class="num2">
            <div class="val">Num2</div>
        </td>
        <td class="num3">
            <div class="val">Num3</div>
        </td>
        <td class="num4">
            <div class="val">Num4</div>
        </td>
        <td class="num5">
            <div class="val">Num5</div>
        </td>                           
    </tr>
    </table>
</td>