Как получить правильное выравнивание для работы в div внутри ячейки таблицы для IE 7? - PullRequest
Новая
       31

Как получить правильное выравнивание для работы в div внутри ячейки таблицы для IE 7?

4 голосов
/ 23 марта 2009

Float:right, указанное для div внутри ячейки таблицы, похоже, не влияет на IE. Я также пробовал выравнивание текста вправо, среди прочего, чтобы выровнять содержимое слоя вправо, но безуспешно в IE 7.

Фрагмент CSS: 

.workloadcell {
    background-color: #E6D7E9;
    padding: 0px;
    width: 14px;
    height: 16px;
    text-align: right;
}

div.workload {
    background-color: #E6D7E9;
    text-align: right;
    width: 14px;
    float: right;
}

Фрагмент HTML: 

<td class="workloadcell">
    <div class="workload">
        1
    </div>
</td>

Как HTML, так и CSS проверяются, и в Firefox текст выравнивается правильно, как и должно быть. Если вы хотите протестировать полный код, скопировав / вставив его, он находится здесь: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1">
        <title>Table Test</title>
        <style type="text/css">
td {
    border: 1px solid black;
}


.workloadcell {
    background-color: #E6D7E9;
    padding: 0px;
    width: 14px;
    height: 16px;
    text-align: right;
}



div.workload {
    background-color: #E6D7E9;
    text-align: right;
    width: 14px;
    float: right;
}
</style>
    </head>



<body>
        <table>
            <tr>
                <td>
                    &nbsp;
                </td>
                <td colspan="4">
                    <div>
                        2008
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    &nbsp;
                </td>
                <td>
                    <div>
                        Q1
                    </div>
                </td>
                <td>
                    <div>
                        Q2
                    </div>
                </td>
                <td>
                    <div>
                        Q3
                    </div>
                </td>
                <td>
                    <div>
                        Q4
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    workload forecast
                </td>
                <td class="workloadcell">
                    <div class="workload">
                        1
                    </div>
                </td>
                <td class="workloadcell">
                    <div class="workload">
                        2
                    </div>
                </td>
                <td class="workloadcell">
                    <div class="workload">
                        2
                    </div>
                </td>
                <td class="workloadcell">
                    <div class="workload">
                        2
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    actual workload
                </td>
                <td class="workloadcell">
                    <div class="workload">
                        3
                    </div>
                </td>
                <td class="workloadcell">
                    <div class="workload">
                        3
                    </div>
                </td>
                <td class="workloadcell">
                    <div class="workload">
                        2
                    </div>
                </td>
                <td class="workloadcell">
                    <div class="workload">
                        3
                    </div>
                </td>
                        </tr>
        </table>
    </body>
</html>

(Я знаю, что CSS не оптимальны в том смысле, что объявления классов повторяются для нескольких элементов, но, пожалуйста, не комментируйте это, если это не относится к проблеме.)

Ответы [ 3 ]

5 голосов
/ 23 марта 2009

Это должно работать так, как у вас есть (или так, как предлагает Алексмия).

Но (это IE), заголовки Q1, Q2 и т. Д. Толкают столбцы таблицы шире, чем запрошенные вами 14 пикселей.

Столбцы выровнены по правому краю в пределах 14px, которые вы определили, но div не смещаются вправо в IE. (Div остается в пределах 14px, определенных для него, даже если столбец на самом деле шире, чем 14px)

Чтобы проиллюстрировать это, вы можете сделать ширину, скажем, 28px или изменить цвет одного из фонов, чтобы продемонстрировать разницу между td и div внутри in. 

.workloadcell {
    background-color: #E6D7E9;
    padding: 0px;
    width: 14px;
    height: 16px;
    text-align: right;
}

div.workload {
    background-color: #E6EEE9;
    text-align: right;
    width: 14px;
    float: right;
}

Решение для IE состоит в том, чтобы либо не определять ширину , либо , чтобы сделать ее достаточно широкой для размещения заголовка.

3 голосов
/ 23 марта 2009

Вам не нужно объявлять правила для div.workload. Используйте только эти правила, и все будет работать нормально: 

 td {
    border: 1px solid black;
     }

 .workloadcell {
    background-color: #E6D7E9;
    padding: 0px;
    width: 20px;
    height: 16px;
    text-align: right;
    }
1 голос
/ 23 марта 2009

Стоит отметить, что IE, особенно v6 на предварительно SP1 XP, и более старые окна имеет серьезные проблемы рендеринга, когда вы перемешиваются таблицы в дивы и дивы в пределах этих таблиц. Как только вы превысите определенную сложность & вложенности вы можете получить пустой / белую страницу.

Если ваш необходимости правой кнопкой выравнивания содержимого текста в некоторых клетках, я предложил бы добавить дополнительное объявление класса в теге тд, не гнездятся в DIV. Я также хотел бы предложить попробовать в IE8, и посмотреть, если проблема не устранена. Вы не упомянули, какие версии вам необходимо поддерживать.

...