выравнивание по вертикали: середина на td в IE8 (нормально в IE7 / FF / Chrome) - PullRequest
Новая
       16

выравнивание по вертикали: середина на td в IE8 (нормально в IE7 / FF / Chrome)

0 голосов
/ 17 февраля 2012

У меня есть простая таблица фиксированной ширины. Первый столбец имеет плавную ширину и содержит простой текст. Другие столбцы имеют фиксированную ширину и содержат дополненный div с более простым текстом в них. Все элементы таблицы настроены на вертикальное выравнивание: среднее. В 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! Любые идеи с благодарностью!

1 Ответ

1 голос
/ 17 февраля 2012

Мой 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>
...