Gmail не распознает valign или вертикальное выравнивание - PullRequest
Новая
       46

Gmail не распознает valign или вертикальное выравнивание

0 голосов
/ 05 июля 2019

Я делаю шаблон электронной почты.Я хочу сделать строку ниже heroImage.jpg.Строка не может быть частью heroImage.jpg, поскольку в электронном письме есть несколько других строк, и все они должны выглядеть одинаково.

То, как я это делаю, заключается в том, что я устанавливаю нижнюю границу длястрока таблицы, в которой находится heroImage.jpg.

Моя проблема в том, что в GMAIL (когда электронная почта доставляется, но не в OUTLOOK, например), я получаю тонкую полосу пространства между heroImage.jpg и моей линией.Я думаю, это потому, что GMAIL не распознает valign и ver-align и, следовательно, heroImage.jpg выравнивается по верху (возможно, по умолчанию), а цвет #heroImageBlock, таким образом, виден.

Но как это должно бытьэтот heroImage.jpg будет выровнен снизу и справа внизу, чтобы он был моей линией (без раздражающего пробела между ними). ​​

Есть ли способ заставить GMAIL распознавать valign или вертикально-выравнивать и избавляться от этогонадоедливое пространство?

HTML 

<tr>
    <td align="center" valign="bottom" id="heroImageContainer">
        <table border="0" cellpadding="0" cellspacing="0" width="600" id="heroImageBlock">                                      
            <tr class="border-bottom">
                <td>
                    <img src="images/heroImage.jpg" alt="" height="150" width="600" id="heroImage" />
                </td>
           </tr>
       </table>
    </td>
</tr>

CSS 

#heroImageBlock td{vertical-align:bottom;}

Я пытался назначить выравнивание по вертикали всем остальным элементам (см. ниже), но это неработа. 

#heroImageContainer {vertical-align:bottom;}
#heroImageBlock{vertical-align:bottom;}
#heroImageBlock tr{vertical-align:bottom;}

В OUTLOOK изображение и красная линия прекрасно сочетаются друг с другом, как и должно быть:

enter image description here

В GMAIL естьэто раздражающая серая линия между изображением и красной линией.

enter image description here

1 Ответ

0 голосов
/ 05 июля 2019

Valign / вертикальное выравнивание не ваша проблема здесь. Поскольку вы специально настраиваете изображение блока, у вас не должно быть ничего для вертикального выравнивания. Это указывает на другую проблему, связанную с тем, как вы объявляете изображение, но я скоро к этому вернусь.

К вашему сведению, лучше, если вы дадите нам больше объема или больше кода. Вы ссылаетесь на класс border-bottom, но мы не видим, какие свойства отображать эту границу. То же самое касается идентификатора на изображении. Если какие-либо свойства устанавливаются для классов или идентификаторов в заголовке, лучше всего включить их, чтобы мы могли помочь вам в отладке.

Вот мои предлагаемые улучшения, чтобы попытаться это исправить.
1. Не устанавливайте какие-либо свойства или классы в строках таблицы. Они не предназначены для этого использования. Перемещение границы может решить проблему, но даже если это не так, таблицы и ячейки таблиц - это то место, куда вы должны добавить их. В этом случае переместите объявление класса border-bottom в ячейку таблицы под строкой.

2. Вы пробовали установить дисплей: блок; на изображении? По умолчанию изображения будут объявлены как встроенные, и вы должны специально установить как блок. Когда он встроен, интервал может отображаться под изображениями и выбрасывает интервалы и размеры при попытке получить идеальный пиксель или, в вашем случае, при выравнивании контента непосредственно ниже.

Дайте мне знать, как они идут.

...