Неправильная раскладка таблицы в IE (7) - PullRequest
Новая
       20

Неправильная раскладка таблицы в IE (7)

4 голосов
/ 13 октября 2008

Ниже приведен код простого HTML-кода с макетом таблицы. В FF это выглядит так, как я думаю, должно выглядеть, в IE7 это не так. что я делаю не так?

И как я могу это исправить? 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <TITLE>test</TITLE>
    </head>
    <body>
        <table  id="MainTable" cellspacing="0" cellpadding="0" border="1">
        <tbody>
            <tr>
                <td colspan="4">
                    <div style='width:769; height:192;'>192
                    </div>
                </td>
            </tr>
            <tr>
                <td colspan="2" valign="top">
                    <div style='width:383; height:100;'>100
                    </div>
                </td>
                <td rowspan="2" valign="top">
                    <div style='width:190; height:200;'>200
                    </div>
                </td>
                <td rowspan="2" valign="top">
                    <div style='width:190; height:200;'>200
                    </div>
                </td>
            </tr>
            <tr>
                <td  valign="top" rowspan="2">
                    <div style='width:190; height:200;'>200
                    </div>
                </td>
                <td  valign="top" rowspan="2">
                    <div style='width:190; height:200;'>200
                    </div>
                </td>
            </tr>
            <tr>
                <td valign="top">
                    <div style='width:190; height:100;'>100
                    </div>
                </td>
                <td valign="top" >
                    <div style='width:190; height:100;'>100
                    </div>
                </td>                           
            </tr>
            <tr>
                <td colspan="2">
                    <div style='width:383; height:100;'>100
                    </div>
                </td>
                <td colspan="2">
                    <div style='width:383; height:100;'>100
                    </div>
                </td>
            </tr>

            <tr>
                <td>
                    <div style='width:190; height:100;'>100
                    </div>
                </td>
                <td>
                    <div style='width:190; height:100;'>100
                    </div>
                </td>
                <td colspan="2">
                    <div style='width:383; height:100;'>100
                    </div>
                </td>
            </tr>
        </tbody>
        </table>
    </body>
</html>

Ответы [ 6 ]

4 голосов
/ 13 октября 2008

Полагаю, вы жалуетесь на минимальную высоту среднего ряда (содержащего только ячейки с разметкой строк) и увеличенную высоту смежных рядов для компенсации, оставляя зазоры между элементами.

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

Но да, в зависимости от того, что вы планируете делать с этим, макет CSS может быть более подходящим. Если это действительно макет с фиксированными пикселями для всего, как в этом примере, абсолютное позиционирование для каждого элемента будет намного, намного проще.

Другие биты: значения ширины / высоты CSS требуют единиц (предположительно 'px'); VALIGN / CELLSPACING / и т.д.. это проще сделать в таблице стилей, даже если вы используете макеты таблиц; DOCTYPE в стандартном режиме может предотвратить некоторые из худших ошибок IE (хотя, не эту старую, не связанную с CSS).

3 голосов
/ 13 октября 2008

Для начала, ваши значения CSS должны иметь единицы измерения, например width:190; должно быть width: 190px;

0 голосов
/ 13 октября 2008

Выбор Doctype (4.01 Transitional без системного идентификатора (url)) запускает режим Quirks в IE, что делает его крайне несовместимым с другими браузерами.

Переключиться на: 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

Или хотя бы: 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">

(и, конечно, проверяет , но HTML и CSS (который выберет недостающие единицы в ваших значениях длины)).

0 голосов
/ 13 октября 2008

Вы должны определенно пойти с CSS. Таблицы НИКОГДА не должны использоваться для разметки.

0 голосов
/ 13 октября 2008

На первый взгляд кажется, что в IE7 не работает поддержка такого вида форматирования. Сначала я собирался предложить избавиться от div-ов и перенести форматирование (ширину и высоту) прямо на TD, но я попробовал это и, похоже, не решил проблему.

Полагаю, это нехорошее решение, но можно ли заменить ячейки со строками строки на большее количество ячеек с невидимой границей между ними? Однако это решение не работает, если текст больше, чем размер верхней ячейки.

0 голосов
/ 13 октября 2008

полностью согласен, вы можете взглянуть на план CSS или другие CSS-фреймворки для получения помощи

...