Подтвердить что ты не робот

Internet Explorer неправильно вычисляет процентную высоту для сгенерированного содержимого в td

IE11 вычисляет высоту ячейки таблицы как высоту ее содержимого (20 пикселей), а не как высоту ее фона (100 пикселей).
Другие браузеры работают как ожидалось.

Как я могу исправить это в IE?
Или: что я делаю неправильно?
Или: как я могу обойти это?

Мне нужно это, чтобы я мог нарисовать вертикальную линию за ячейкой таблицы.

1. Ограничения

Некоторые рабочие обходы невозможны из-за деталей моей конкретной проблемы.

1.А. Высота не постоянна

Высота не постоянна, она зависит от количества текста в другой ячейке.

Поэтому я не могу использовать фиксированную высоту строки. Если бы я мог, я мог бы просто установить этот фиксированный размер как:: перед высотой.

1. Невозможно использовать фоновое изображение

Я не могу обойти это, используя повторяющееся фоновое изображение, потому что строка должна быть не нарисована за иконкой с центром, поэтому я рисую ее с помощью сгенерированного содержимого (::before и ::after) с height: calc(50% - 20px);.

2. Онлайн-образец

Попробуйте открыть онлайн-образец в IE11, а также в Firefox или Chrome.

Обратите внимание, что JavaScript показывает первую ячейку be 100px tall, а фон заполняет 100px. Но сгенерированный контент только высотой ~ 20px...

<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            #borked {
                background: yellow;
                position: relative;
                height: 100%;
            }
            #borked~* {
                height: 100px;
            }
            #borked::before {
                content: "";
                position: absolute;
                top: 0;
                width: 100%;
                height: 100%;
                background-color: rgba(255, 0, 0, 0.3);
            }
        </style>
    </head>
    <body>
        <table>
            <tr><td id="borked">abc</td><td>def</td></tr>
        </table>
    </body>
    <script type="text/javascript">
        "use strict";
        var borked = document.getElementById("borked");
        var c = document.createElement("td");
        c.textContent = "(1st cell seems to be " + borked.clientHeight + "px tall)";
        borked.parentElement.appendChild(c);
    </script>
</html>
4b9b3361

ОТВЕТЫ

Ответ 1

Высота содержимого Internet Explorer связана с ближайшим элементом с высотой, установленной в абсолютных единицах, например пикселями. Если вы хотите использовать% height, вам нужно установить высоту на всех родительских элементах, это будет html, body, table....

Потому что это невозможно для вас, используйте этот трюк в соответствии с вашими требованиями.

"use strict";
var borked = document.getElementById("borked");
var td = document.createElement("td");
td.textContent = "(1st cell seems to be " + borked.clientHeight + "px tall)";
borked.parentElement.appendChild(td);
#borked {
    background: yellow;
    position: relative;
    height: 100%;
    overflow: hidden;
}
#borked~* {
    height: 100px;
}
#borked::before {
    content: "";
    position: absolute;
    top: 0;
    width: 100%;
    margin: -99999em;
    padding: 99999em;
    background-color: rgba(0, 255, 0, 0.3);
}
<table>
    <tr><td id="borked">abc</td><td>def</td></tr>
</table>