У меня проблема с TABLES во всех версиях Internet Explorer, точнее с высотой TD, которые сводят меня с ума.
У меня есть следующая разметка
<table>
<tbody>
<tr style="vertical-align:top;">
<td id="TD1" width="35" colspan="2" style="background-color:yellow; height:1%;">
<div id="DIV1" style="height:10px; background-color:red;"></div>
</td>
<td id="TD2" width="15" rowspan="2" style="height:99%;">
<div id="DIV2" style="height:160px; background-color:green;"></div>
</td>
</tr>
<tr style="vertical-align:top;">
<td id="TD3" width="25">
<div id="DIV3" style="height:60px; background-color:blue;"></div>
</td>
<td id="TD4" width="10">
<div id="DIV4" style="height:80px; background-color:orange;"></div>
</td>
</tr>
</tbody>
</table>
Для лучшего понимания вы можете выполнить код в tryit-редакторе от w3schools.com
http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_td_height.
Я думаю, что это объясняет, что я пытаюсь объяснить:)
Хотя высота DIV2 меньше или равна высоте DIV1 и DIV3 или DIV4, она работает, как и ожидалось. Но когда высота DIV2 больше высоты DIV1 и DIV3 или DIV4, IE увеличивает TD1 в том же соотношении, что и TD3 и TD4.
Во всех других браузерах рейзит только TD3 и TD4. TD1 имеет ту же высоту, что и DIV1.
У кого-нибудь есть идея или обходной путь, как я могу это исправить?
Без таблицы, к сожалению, нет выбора.