GMail заставляет TD, содержащий spacer.gif, иметь высоту 16px

Question

Так что я только что потерял несколько часов своей жизни, пытаясь выиграть эту битву, но без удачи. Итак, я пытаюсь заполнить таблицу тремя изображениями по 10 пикселей, но GMail заставляет каждую ячейку иметь размер 16 пикселей. Вот с чем я работаю:

<table border="0" cellpadding="0" cellspacing="0" width="550" style="height:10px !important">
    <tr style="height:10px" height="10">
    <td width="10" height="10" style="height:10px !important">
        <img src="http://s3.amazonaws.com/meagain/images/templates/letterhead/corner_tl.gif" style="display:inline; padding: 0px; margin:0px" width="10px" height="10px"></td>
    <td width="531" height="10" style="height:10px !important; background-color:#FFFFFF;">
        <img src="http://s3.amazonaws.com/meagain/images/templates/letterhead/spacer.gif" style="display:inline; padding: 0px; margin:0px" width="10px" height="10px"></td>
    <td width="9" height="10" style="height:10px !important">
        <img src="http://s3.amazonaws.com/meagain/images/templates/letterhead/corner_tr.gif" style="display:inline; padding: 0px; margin:0px" width="9px" height="10px"></td>
    </tr>
</table>

Мои извинения за то, что есть так много избыточных атрибутов, потому что я пробовал все. По сути, я пытаюсь сделать стол ровно в 10 пикселей. Независимо от того, что, однако, GMail имеет высоту 16px. Если я использую инструменты разработчика, чтобы удалить все три изображения прямо из исходного кода, то таблица свернется до 10 пикселей. Кроме того, если я удаляю 2 из трех изображений, он по-прежнему остается 16px. Это почти так, как будто TD должен быть 16px, если он содержит изображение, или изображение имеет 3px отступа вокруг него.

Кто-нибудь испытывал что-нибудь подобное? И если да, есть идеи? У меня кончаются идеи и здравомыслие ..

Answer 1

Как сказал Херби, убедитесь, что вы установили высоту строки на TD.

Также убедитесь, что у вас установлен размер шрифта, потому что gmail может устанавливать минимальную высоту TD на основе пробела в этой ячейке. В целом, установка размера шрифта 1px в ячейках, где нет текста, является хорошей практикой.

Похоже, это для создания электронной почты в формате html, верно? Посмотрите на это для любых других вопросов - это помогло мне кучу раз http://www.emailology.org/#1 и http://www.campaignmonitor.com/resources/ для подсказок.

Answer 2

Я пока не могу комментировать, поэтому буду публиковать в качестве ответа ...

16px звучит как значение высоты строки.Вы пытались установить высоту строки каждого TD в 10px или изменить каждое IMG со встроенного на встроенный блок?

Answer 3

Я пытался выяснить ваше решение.

Это буквальное решение, поместите его в тэг TD:

style="line-height:0"

Answer 4

В вашем <img> теге вы можете поместить это:

 style="display:block;" 

... или вы можете сделать высоту до max-height. Это должно решить вашу проблему.

Answer 5

В html - <img> тег не является тегом блока, поэтому нам нужно использовать следующий css, чтобы он работал как тег блока

style="display:block;"

с этим CSS ваша заданная высота будет отлично работатьВаша HTML-страница.

Попробуйте один раз!