У меня есть следующая таблица:
<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.
Вместо того, чтобы использовать свойство высоты (с учетом его проблем), вы можете использовать разделитель. Для примера - прозрачный малый gif, который задает высоту так, как вы хотите. Gif, вы просто сделаете вот так: <img src="./gfx/spacer.gif" style="height:14px;" />
В прошлом я обнаружил, что атрибут высоты ячеек переопределяется размером шрифта внутри ячейки, даже если шрифт отсутствует. Установите размер шрифта примерно на 1 или 0 пикселей, и ваши высоты действительно вступят в силу.
Попробуйте следующее:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
эта таблица изменяется на лету с помощью 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 пикселей меньше в этом браузере.
То, что я делаю, объявляет крайние столбцы сначала со всеми ширинами и высотами строк, затем я объединять все строки в среднем столбце с помощью rowspan.
Для высот, в среднем столбце после объединения, я просто пишу <tr width и без высоты, все браузеры не поддерживают высоту, я думаю. Нет необходимости в GIF. Он работал у меня все время.
Надеюсь, это поможет.
Существует проблема чрезмерной высоты строки в IE9-Beta, которая также отображается в превью печати и печатной копии. Например, проблема с высотой строки возникает, когда вы пытаетесь распечатать линию 1px high. Чтобы исправить, я добавил <div style="font-size:0pt;">... </div> вокруг всего блока кода HTML.
У меня была аналогичная проблема. Я заметил, что в IE свойство width иногда должно быть определено как процент для работы с IE
style="width: 25%"
а затем определен в css для непрерывной непрерывной работы браузера
.squares {
text-align: left;
margin: 0 auto;
height:250px; width:250px;
}
попробуйте это
<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>
Попробуйте это... Его работа для меня...
<td style="height:2px;font-size:2px;">
<img height="2px" alt="" src="images/transparent.gif" />
</td>