Высота строки таблицы в Internet Explorer - PullRequest
Новая
       6

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

10 голосов
/ 08 апреля 2009

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

<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?

РЕДАКТИРОВАТЬ: Должен был упомянуть ранее - эта таблица изменяется на лету с использованием JavaScript.

Ответы [ 9 ]

8 голосов
/ 08 апреля 2009

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

4 голосов
/ 02 июня 2009

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
1 голос
/ 21 октября 2011

попробуйте 

<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>
1 голос
/ 03 июня 2011

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

style="width: 25%"

затем определяется абсолютно в CSS для кросс-браузерной непрерывности 

.squares {
text-align: left;
margin: 0 auto;
height:250px; width:250px;
}
1 голос
/ 30 декабря 2010

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

1 голос
/ 17 октября 2009

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

Для высоты, в средней колонке после слияния я просто пишу <tr width и без высоты, я думаю, что все браузеры не поддерживают высоту. Нет необходимости в гифках. Это работало для меня все время.

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

1 голос
/ 08 апреля 2009

Размер этой таблицы изменяется на лету с использованием 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 пикселей, возможно.

1 голос
/ 08 апреля 2009

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

0 голосов
/ 12 августа 2011

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

<td style="height:2px;font-size:2px;">
     <img  height="2px" alt="" src="images/transparent.gif" />
</td>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...