HTML таблица: объединенные ячейки: неправильная высота в FF и IE (хорошо, Chrome) - PullRequest
Новая
       50

HTML таблица: объединенные ячейки: неправильная высота в FF и IE (хорошо, Chrome)

1 голос
/ 16 февраля 2011

Мне нужно отобразить HTML с различными ячейками, слитыми по строкам.

Вот тест, который иллюстрирует требование и проблему: - 

<html>
    <head></head>
    <body>
        <table cellspacing="0" cellpadding="0" border="1">
            <tbody>
                <tr>
                    <td rowspan="2" style="height: 40px">
                        <div style="width: 100px;">RS=2</div>
                    </td>
                    <td rowspan="1" style="height: 20px">
                        <div style="width: 100px;">RS=1</div>
                    </td>
                    <td rowspan="3" style="height: 60px">
                        <div style="width: 100px;">RS=3</div>
                    </td>
                </tr>
                <tr>
                    <td rowspan="4" style="height: 80px">
                        <div style="width: 100px;">RS=4</div>
                    </td>
                </tr>
                <tr>
                    <td rowspan="2" style="height: 40px">
                        <div style="width: 100px;">RS=2</div>
                    </td>
                </tr>
                <tr>
                    <td rowspan="2" style="height: 40px">
                        <div style="width: 100px;">RS=2</div>
                    </td>
                </tr>
                <tr>
                    <td rowspan="1" style="height: 20px">
                        <div style="width: 100px;">RS=1</div>
                    </td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

При отображении в Chrome все в порядке, но в FF3.6 и IE8 это не так (посмотрите на два «RS = 2» в первом столбце, они имеют одинаковый диапазон строк и высоту, но заметно различаются). Высота строк для меня невероятно важна, так как рядом с ней я отображаю еще одну таблицу с одиночными строками фиксированной высоты, которые должны соответствовать этой таблице).

Кто-нибудь может посоветовать, пожалуйста, как это можно исправить в Firefox и IE?

Ответы [ 3 ]

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

Вот исправление, которое работает в Firefox, но не в Internet Explorer. Удалите атрибут высоты из ячеек, затем добавьте 

 style="height:20px;"

на все строки ИЛИ

добавить этот стиль тега внутри головы: 

<style>
tr{height:20px;}
</style>

Это работает в Firefox и Chrome не затрагивается, но IE по-прежнему создает беспорядок. Firefox и IE имеют историю ошибок при отображении таблиц. обсуждение ошибки рендеринга высоты ячейки таблицы в Firefox

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

Без правильного типа документа вы находитесь в режиме причуд, и IE, в частности, никогда не будет пытаться работать, как все другие, гораздо более современные браузеры. В любом случае это не очень хорошо.

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

Некоторые новейшие «интеллектуальные» браузеры распознают возможные ошибки «не закрытых тегов» и показывают их, как ваше дерево хорошо сделано, но это не всегда так.

Убедитесь, что все открытые теги закрыты, необходимобыть незамкнутым.Если вы используете Dreamweaver, вы можете свернуть / развернуть теги с помощью меню слева.-> ... <- или <-...->

...