TD, TH без содержания всегда 0 высота в Internet Explorer

Question

Я обнаружил, что в IE, если у TD или TH нет содержимого, он считается размером 0 на 0 пикселей.В Chrome его высота рассчитывается на основе высоты строки, высота которой определяется на основе содержимого строки.

Я понял это, потому что пытался добавить псевдоэлемент :after к элементу TH, у которого не было содержимого.В Chrome псевдоэлемент охватывал высоту строки, но в IE он был высотой всего в несколько пикселей.

Я попытался поместить   в TD, и это помогло мне пройти путь, но поскольку у моего TH был размер строки 2, IE вычислял высоту только как одну строку текста, а не полнуювысота строки.

Это то, что можно обойти в IE?

.test
{
    position: relative;
}

.test:after
{
    width: 5px;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    position: absolute;
    display:block;
    content: ' ';
    background-color: #007bff;
}

Answer 1

Либо используйте <p>&nbsp;</p>, либо вставьте пустой GIF для обеспечения стабильности в дизайне."Подкладка" - это квадратное изображение размером 1 пиксель, которое является прозрачным и может быть отрегулировано (по ширине и высоте).

Можете ли вы найти подкладку "" между этимицитаты?

До дней <div> и адаптивной верстки таблиц рулил веб-дизайн.Если вы хотите сделать сплошную линию, вы можете поместить прокладку внутри строки / столбца таблицы, назначить цвет <td> и использовать проставку или изображение прокладки, закодированные для желаемой высоты и ширины.Это позволило ускорить загрузку вашей веб-страницы, поскольку размер изображения составлял <= 1 КБ, что было критически важным фактором в те дни доступа к телефонной линии. </p>

Answer 2

Просто вставьте:

 

В пустые элементы TD или TH.