Разная таблица обработки td-height в IE по сравнению со всеми остальными?

#html #css #internet-explorer #html-table

#HTML #css #internet-explorer #html-таблица

Вопрос:

У меня проблема с ТАБЛИЦАМИ во всех версиях Internet Explorer, или, скорее, с высотой TDS, которые сводят меня с ума.

У меня есть следующая разметка

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

У кого-нибудь есть идея или обходной путь, как я могу это исправить?

Макет без таблиц, к сожалению, не вариант.

1. Первое, что нужно проверить, это то, что IE не находится в режиме Quirks. Кроме того, с какими версиями IE вы тестируете?

2. Без правильного doctype вы никогда не заставите IE пытаться работать так, как другие, более современные браузеры. IE находится в режиме причуд.

3. @Spudley IE7 (режим совместимости), IE8, IE9

Ответ №1:

Без правильного doctype вы никогда не заставите IE пытаться работать так, как другие, более современные браузеры. IE находится в режиме причуд. Используйте этот:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

или этот:

<!DOCTYPE html>

1. Мне кажется, установлен правильно: <!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.0 Transitional//EN» » w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd «> <html xmlns=» w3.org/1999/xhtml » xml:lang=»de» lang=»de»> документ.compatMode является CSS1compat

2. @elweilando — Новые веб-страницы не используют переходный doctype. Transitional предназначен для «перехода» от старой, устаревшей разметки. Всегда используйте строгие типы документов.

3. Я пробовал оба объявления, но это ничего не меняет. Html5, а также xhtml strict в этом случае делают то же самое, что и transitional.

4. @elweilando — есть и другие вещи, которые могут вызвать режим quirks, но, не видя вашу фактическую страницу, мы не можем рассказать больше о том, что происходит.

5. @elweilando — Второй doctype — это doctype стандартного режима, и его не следует путать ни с чем HTML5.