vertical-align:IE8中的td中间(IE7 / FF / Chrome中的确定)

时间:2012-02-16 22:24:36

标签: html css internet-explorer-8 vertical-alignment

我有一个简单的固定宽度表。第一列具有流体宽度并包含一些简单文本。其他列是固定宽度,并包含一个带填充的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列将垂直对齐,就像它仍然是旧的行高一样。
  4. 所以,这与IE8无法重新计算剩余最右列相对于新行高的垂直对齐。

    疯狂的是,它在IE7中很好用!任何想法都非常感谢!

1 个答案:

答案 0 :(得分: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>