ShadowOfCasper
@ShadowOfCasper
Middle User Interface Web Developer

Почему мобильный клиент Gmail разрывает html-письмо?

Вёрстка полностью табличная. Макет письма разрезан на кусочки и вставлен в отдельные ячейки таблицы. В каждую колонку и таблицу добавлены border-collapse: collapse, padding: 0, margin: 0; у каждой картинки в td есть display: block. В декстопных версиях почтовых веб-интерфейсов всё хорошо, но в мобильном gmail-клиенте есть небольшой разрыв там, где в строке 2 ячейки и более и в них картинки:
<table width='600' style='padding: 0; border-collapse: collapse;'>
			<tbody>
				<tr style='padding: 0; border-collapse: collapse;'>
					<td width='335' style='padding: 0; border-collapse: collapse;'>
						<img width='335' style='display: block;padding: 0;margin: 0' src="http://tech.aggo.ru/safr-mail/header-top-left.png" alt='братья Сафроновы'>
					</td>
					<td width='265' style='padding: 0; border-collapse: collapse;'>
						<a href='http://www.safronovy.ru/' target='_blank'>
							<img width='265' style='display: block; padding: 0;margin: 0' src="http://tech.aggo.ru/safr-mail/header-top-right.png" alt='Купить билет'>
						</a>
					</td>
				</tr>
			</tbody>
		</table>


И тут:

<table width='600' style='padding: 0; border-collapse: collapse;'>
			<tbody>
				<tr style='padding: 0; border-collapse: collapse;'>
					<td style='padding: 0; border-collapse: collapse;' width='310'>
						<img style='display: block;' src="http://tech.aggo.ru/safr-mail/order.png" alt='Заказ билетов: +7(495) 115-39-62'>
					</td>
					<td style='padding: 0; border-collapse: collapse;' width='70'>
						<a href="https://vk.com/safronovybrothers" target='_blank'>
							<img width='70' style='display: block;padding: 0;margin: 0' src="http://tech.aggo.ru/safr-mail/vk.png" alt="vk">
						</a>
					</td>
					<td style='padding: 0; border-collapse: collapse;' width='65'>
						<a href="https://ru-ru.facebook.com/bratyasafronovy/" target='_blank'>
							<img width='65' style='display: block;padding: 0;margin: 0' src="http://tech.aggo.ru/safr-mail/fb.png" alt="facebook">
						</a>
					</td>
					<td style='padding: 0; border-collapse: collapse;' width='65'>
						<a href="https://www.instagram.com/safronovbrothers/" target='_blank'>
							<img width='65' style='display: block;padding: 0;margin: 0' src="http://tech.aggo.ru/safr-mail/insta.png" alt="instagram">
						</a>
					</td>
					<td style='padding: 0; border-collapse: collapse;' width='90'>
						<a href="https://www.youtube.com/channel/UCgmzydTKw29appyPOhbRp0Q" target='_blank'>
							<img width='90' style='display: block' src="http://tech.aggo.ru/safr-mail/yout.png" alt="youtube">
						</a>
					</td>
				</tr>
			</tbody>
		</table>


Дают такой результат:
59df38df539e6739894416.png

pls help
  • Вопрос задан
  • 614 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы