Высота строки таблицы в Internet Explorer

У меня есть следующая таблица:

<table>
    <tr>
        <td style="height: 7px; width: 7px"> A1 </td>
        <td style="height: 7px"> B1 </td>
        <td style="height: 7px; width: 7px"> C1 </td>
    </tr>
    <tr>
        <td style="width: 7px"> A2 </td>
        <td> B2 </td>
        <td style="width: 7px"> C2 </td>
    </tr>
    <tr>
        <td style="height: 7px; width: 7px"> A3 </td>
        <td style="height: 7px"> B3 </td>
        <td style="height: 7px; width: 7px"> C3 </td>
    </tr>
</table>

Основная идея состоит в том, что первая строка должна быть 7 пикселей. Левая и правая ячейки (A1 и C1) должны иметь ширину 7px, а средняя ячейка (B1) должна масштабироваться в соответствии с шириной таблицы. То же самое относится к нижней строке (A3, B3, C3).

Однако средний ряд должен масштабироваться по высоте - другими словами, он должен быть (tableheight - 14px). Левая и правая ячейки (A2, C2) должны иметь ширину 7 пикселей.

Пример:

             7px              x               7px
          |------|-------------------------|------|

---       +------+-------------------------+------+
 |        |      |                         |      |
 | 7px    |      |                         |      |
 |        |      |                         |      |
---       +------+-------------------------+------+
 |        |      |                         |      |
 |        |      |                         |      |
 |        |      |                         |      |
 |        |      |                         |      |
 | y      |      |                         |      |
 |        |      |                         |      |
 |        |      |                         |      |
 |        |      |                         |      |
 |        |      |                         |      |
---       +------+-------------------------+------+
 |        |      |                         |      |
 | 7px    |      |                         |      |
 |        |      |                         |      |
---       +------+-------------------------+------+

ОДНАКО: В Internet Explorer ширины работают отлично (столбцы A и C имеют 7px, динамик столбца B динамически), но высоты не соответствуют. Строки 1, 2 и 3 оказываются ровно на 33% от высоты стола, независимо от того, что я делаю. К сожалению, я должен использовать эту таблицу, поэтому замена его на набор DIV не является вариантом.

У меня есть следующий DOCTYPE:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Мне нужно сохранить это, так как некоторые другие элементы на странице полагаются на некоторые сложные макеты на основе CSS.

Может ли кто-нибудь указать мне в правильном направлении, чтобы взломать это в форму для IE?

EDIT: Должно быть упомянуто ранее - эта таблица изменяется на лету с помощью javascript.

Ответ 1

Вместо того, чтобы использовать свойство высоты (с учетом его проблем), вы можете использовать разделитель. Для примера - прозрачный малый gif, который задает высоту так, как вы хотите. Gif, вы просто сделаете вот так: <img src="./gfx/spacer.gif" style="height:14px;" />

Ответ 2

В прошлом я обнаружил, что атрибут высоты ячеек переопределяется размером шрифта внутри ячейки, даже если шрифт отсутствует. Установите размер шрифта примерно на 1 или 0 пикселей, и ваши высоты действительно вступят в силу.

Ответ 3

Попробуйте следующее:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

Ответ 4

эта таблица изменяется на лету с помощью javascript.

Тогда как насчет настройки:

table.rows[1].style.height= (totalheight-14)+'px';

в явном виде?

Фактический правильный ответ старой школы для этого:

<tr height="7">...<tr>
<tr height="*">...<tr>
<tr height="7">...<tr>

К сожалению, браузеры никогда не поддерживали HTML * */'n * синтаксис. Вы можете сказать:

<tr style="height: 7px;">...</tr>
<tr style="height: 100%;">...</tr>
<tr style="height: 7px;">...</tr>

но IE берет это буквально и делает средний ряд 100% высоты всей таблицы (что, в свою очередь, делает таблицу выше, чем она должна быть). Вы могли бы использовать это в сочетании с взломом IE, чтобы, возможно, увеличить размер таблицы на 14 пикселей меньше в этом браузере.

Ответ 5

То, что я делаю, объявляет крайние столбцы сначала со всеми ширинами и высотами строк, затем я объединять все строки в среднем столбце с помощью rowspan.

Для высот, в среднем столбце после объединения, я просто пишу <tr width и без высоты, все браузеры не поддерживают высоту, я думаю. Нет необходимости в GIF. Он работал у меня все время.

Надеюсь, это поможет.

Ответ 6

Существует проблема чрезмерной высоты строки в IE9-Beta, которая также отображается в превью печати и печатной копии. Например, проблема с высотой строки возникает, когда вы пытаетесь распечатать линию 1px high. Чтобы исправить, я добавил <div style="font-size:0pt;">... </div> вокруг всего блока кода HTML.

Ответ 7

У меня была аналогичная проблема. Я заметил, что в IE свойство width иногда должно быть определено как процент для работы с IE

style="width: 25%"

а затем определен в css для непрерывной непрерывной работы браузера

.squares {
text-align: left;
margin: 0 auto;
height:250px; width:250px;
}

Ответ 8

попробуйте это

<table>
    <tr>
        <td style="height: 7px; width: 7px"> A1 </td>
        <td style="height: 7px"> B1 </td>
        <td style="height: 7px; width: 7px"> C1 </td>
    </tr>
    <tr height="100%">
        <td style="width: 7px"> A2 </td>
        <td> B2 </td>
        <td style="width: 7px"> C2 </td>
    </tr>
    <tr>
        <td style="height: 7px; width: 7px"> A3 </td>
        <td style="height: 7px"> B3 </td>
        <td style="height: 7px; width: 7px"> C3 </td>
    </tr>
</table>

Ответ 9

Попробуйте это... Его работа для меня...

<td style="height:2px;font-size:2px;">
     <img  height="2px" alt="" src="images/transparent.gif" />
</td>