Ответ 1
На изображениях попробуйте использовать
style="display:block"
Он должен работать.
Удаление белого интервала между изображениями в таблице
Я знаю, что это было рассмотрено раньше, но решения не помогли мне - я не программист, но я могу обрабатывать базовый код HTML. Я пытаюсь отправить HTML-адрес электронной почты, который имеет 11 изображений, помещенных в таблицу, чтобы стать одним большим изображением - однако белые строки появляются между строками при отправке.
У меня есть стиль таблицы с border="0" cellpadding="0" cellspacing="0", но это не помогает - может кто-нибудь, пожалуйста, дать мне совет? Кроме того, поскольку я не программист, я не понимаю каких-либо сложных ответов!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Untitled document</title>
</head>
<body>
<!-- Save for Web Slices (toast offer mailer 2.jpg) -->
<table style="height: 920px;" id="Table_01" width="650" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td colspan="2"><a href="#" onclick="location.href='http://www.metroplan.co.uk/2012/#/4/'; return false;"> <img src="http://mail.bridgemailsystem.com/pms/graphics/metroplan/toast-offer-mailer-2_01.jpg" width="236" height="201" border="0" style="border: 0;"></a></td>
<td colspan="3"><a href="#" onclick="location.href='http://www.metroplan.co.uk/2012/#/78/'; return false;"> <img src="http://mail.bridgemailsystem.com/pms/graphics/metroplan/toast-offer-mailer-2_02.jpg" width="177" height="201" border="0" style="border: 0;"></a></td>
<td colspan="2"><a href="#" onclick="location.href='http://www.metroplan.co.uk/2012/#/10/'; return false;"><img src="http://mail.bridgemailsystem.com/pms/graphics/metroplan/toast-offer-mailer-2_03.jpg" width="237" height="201" border="0" style="border: 0;"></a></td>
</tr>
<tr>
<td><img src="http://mail.bridgemailsystem.com/pms/graphics/metroplan/toast-offer-mailer-2_04.jpg" width="152" height="155"></td>
<td colspan="3"><a href="#" onclick="location.href='http://www.metroplan.co.uk/2012/#/116/'; return false;"> <img src="http://mail.bridgemailsystem.com/pms/graphics/metroplan/toast-offer-mailer-2_05.jpg" width="173" height="155" border="0" style="border: 0;"></a></td>
<td colspan="2"><a href="#" onclick="location.href='http://www.metroplan.co.uk/2012/#/42/'; return false;"> <img src="http://mail.bridgemailsystem.com/pms/graphics/metroplan/toast-offer-mailer-2_06.jpg" width="180" height="155" border="0" style="border: 0;"></a></td>
<td><img src="http://mail.bridgemailsystem.com/pms/graphics/metroplan/toast-offer-mailer-2_07.jpg" width="145" height="155"></td>
</tr>
<tr>
<td colspan="7"><img src="http://mail.bridgemailsystem.com/pms/graphics/metroplan/toast-offer-mailer-2_08.jpg" width="650" height="237"></td>
</tr>
<tr>
<td colspan="7"><img src="http://mail.bridgemailsystem.com/pms/graphics/metroplan/toast-offer-mailer-2_09.jpg" width="650" height="231"></td>
</tr>
<tr>
<td colspan="3"><a href="#" onclick="location.href='http://www.metroplan.co.uk/'; return false;"> <img src="http://mail.bridgemailsystem.com/pms/graphics/metroplan/toast-offer-mailer-2_10.jpg" width="314" height="95" border="0" style="border: 0;"></a></td>
<td colspan="4"><a href="mailto:[email protected]"> <img src="http://mail.bridgemailsystem.com/pms/graphics/metroplan/toast-offer-mailer-2_11.jpg" width="336" height="95" border="0" style="border: 0;"></a></td>
</tr>
<tr>
<td><img src="images/spacer.gif" width="152" height="1"></td>
<td><img src="images/spacer.gif" width="84" height="1"></td>
<td><img src="images/spacer.gif" width="78" height="1"></td>
<td><img src="images/spacer.gif" width="11" height="1"></td>
<td><img src="images/spacer.gif" width="88" height="1"></td>
<td><img src="images/spacer.gif" width="92" height="1"></td>
<td><img src="images/spacer.gif" width="145" height="1"></td>
</tr>
</tbody>
</table>
<!-- End Save for Web Slices -->
</body>
</html>
Ответы
Ответ 2
Из быстрой проверки, которую я только что сделал, похоже, проблема заключается в том, что пустое пространство внутри разметки ячеек занимает какое-то место и делает ячейки более крупными.
Один из способов заключается в том, чтобы установить размер шрифта ячеек равным 0, тем самым устраняя это дополнительное пространство.
Живой тестовый пример с исправленным применением.
В вашем случае попробуйте добавить это в отправляемый HTML-код:
<style type="text/css">
table td { font-size: 0px; }
</style>
Предполагается, что у вас есть только одна таблица, и все ячейки имеют только изображения, если у вас больше таблиц, тогда укажите эту таблицу id, например. <table id="MyImagesTable"> затем измените на:
#MyImagesTable td { font-size: 0px; }
Если почтовый клиент тех, кто получает письмо, не поддерживает таблицы стилей, вам придется вручную установить его для каждой ячейки:
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td style="font-size: 0px;">...</td>
<td style="font-size: 0px;">...</td>
<td style="font-size: 0px;">...</td>
</tr>
<!-- ...more rows... -->
</table>
Ответ 3
Я также сталкиваюсь с той же проблемой.
Но я попробовал
<img src ="images/xyz.jpg" style="display:block">
и решил
Ответ 4
Эта проблема распространена на многих почтовых клиентах, просто используйте:
<img style="display:block" />
для каждого изображения в вашем HTML.
Ответ 5
Без фактического просмотра вашего кода я бы предположил, что вы видите пробелы между изображениями, потому что у вас есть реальное пространство между вашими изображениями.
Если у вас есть что-то вроде этого...
<img src="image1.jpg">
<img src="image2.jpg">
Измените его на... (обратите внимание, что между двумя тегами изображения нет места)
<img src="image1.jpg"><img src="image2.jpg">
Если вы размещаете изображения в отдельных ячейках (то есть одно изображение на ячейку), попробуйте поместить CSS border-collapse:collapse...
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse:collapse">
UPDATE
Как отметил @Shadow, ни одна из частей выше не изменит ситуацию.
Похоже, что FireFox и Chrome имеют дело с изображением, так как текст (по какой-то причине), поэтому его предложение table td { font-size:0px; } - это ИМХО правильный ответ. (IE, похоже, не затрагивает проблему.)
Ответ 6
Многие из них игнорируются некоторыми почтовыми клиентами. Это всегда риск, который вы принимаете в тяжелых графических html-письмах. У вас почти наверняка есть получатели, которые видят это неправильно. Я всегда предлагаю своим клиентам не запрашивать такие проекты электронной почты, которые имеют 6-12 изображений, сгруппированных в таблицу. Тем не менее, всегда будут те, кто настаивает на том, чтобы это было сделано, и даже после того, как я покажу им результаты в нескольких почтовых клиентах, они по-прежнему просят, чтобы это было сделано.
Избегайте его, если можете. К сожалению, на самом деле нет гарантированного исправления.
Если вы отправляете электронное письмо группе получателей, которые находятся в одном и том же почтовом клиенте, вы, вероятно, можете решить ее с помощью одного из приведенных выше кодов, чтобы найти тот, который отвечает ваш почтовый клиент.
Ответ 7
много раз это может быть ошибка пользователя. когда вы нарезаете фотошоп, убедитесь, что ВСЕ СЦЕНЫ ОБРАТНЫ. если есть пробел в 1px, то это все испортит!!!
тоже, вот трюк, который я узнал....
Установите для всех изображений тег border = "0" после alt=""...
если есть ** **, и я имею в виду только , а не
так, например....
попробуйте это и убедитесь, что все изображения имеют border = "0", и все теги имеют заданную ширину, все фрагменты касаются, и у вас должно быть 0 пробелов.