Вопрос по html – Удаление белого интервала между изображениями в таблице

12

Я знаю, что это уже рассматривалось ранее, но решения не помогли мне - я не программист, но я могу работать с базовым 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="http://www.metroplan.co.uk/2012/#/4/"> <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="http://www.metroplan.co.uk/2012/#/78/"> <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="http://www.metroplan.co.uk/2012/#/10/"><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="http://www.metroplan.co.uk/2012/#/116/"> <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="http://www.metroplan.co.uk/2012/#/42/"> <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="http://www.metroplan.co.uk/"> <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>
Извинения - как freefaller отвечает на самом делеborder-collapse:collapse... El Ronnoco
Можете ли вы показать фактический HTML-код, который вы отправляете? DCoder
Кроме того, естьJS Fiddleсреди прочего, для васshow нам, что происходит, чтобы мы могли увидеть ваш код в действии. David Thomas
Вам может понадобиться использовать стильborder:collapse El Ronnoco
нужно опубликовать свой HTML и CSS, но вы можете попробоватьimg { border: 0; margin: 0; padding: 0; } и то же самое наtdчтобы увидеть, удаляет ли это это. martincarlin87

Ваш Ответ

7   ответов
20

На изображениях попробуйте использовать

style="display:block" 

Он должен работать.

Удивительно, что добавление отображения: стиль блока к изображению устранило проблему для меня.
где я должен добавить это? user1468930
Я не понимаю, почему это будет работать?
1

Эта проблема распространена на многих почтовых клиентах, просто используйте:

<img style="display:block" />

на каждом изображении в вашем HTML.

Это уже было предложено вother answer here нет смысла повторять это через полгода.
Это сработало и для меня, и я не нашел основной ответ действительно полезным для моего случая, так как у меня было содержание.
Другой ответ не указал где (в теге img). Я думаю, что он не редактировал там, потому что ему не разрешили. Ну, я сделал то, что он сказал, и это сработало в моем HTML для электронной почты.
0

Многое из этого совершенно игнорируется некоторыми почтовыми клиентами. Это всегда риск, который вы берете на себя в тяжелых графических электронных письмах. Вы почти гарантированно получите получателей, которые видят это неправильно. Я всегда призываю своих клиентов не просить такого рода дизайнов электронной почты, которые представляют собой 6-12 изображений, сгруппированных в таблицу. Тем не менее, всегда найдутся те, которые настаивают на том, чтобы это было сделано, и даже после того, как я покажу им результаты в нескольких почтовых клиентах, они все еще просят об этом.

Избегайте этого, если можете. К сожалению, действительно нет гарантированного решения.

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

3

Я также сталкиваюсь с той же проблемой.

Но я пытался

<img src ="images/xyz.jpg"  style="display:block">

и решил

0

На самом деле, не увидев ваш код, я бы предположил, что вы видите промежутки между изображениями, потому что у вас есть фактическое пространство между изображениями.

Если у вас есть что-то вроде этого ...

<img src="image1.jpg">
<img src="image2.jpg">

Измените его на ... (обратите внимание, что между двумя тегами изображений нет места)

<img src="image1.jpg"><img src="image2.jpg">

Если вы размещаете изображения в отдельных ячейках (то есть по одному изображению на ячейку), попробуйте добавить CSSborder-collapse:collapse...

<table border="0" cellpadding="0" cellspacing="0" style="border-collapse:collapse">

UPDATE

Как указал @Shadow, ни одна из частей выше не будет иметь никакого значения.

Похоже, что FireFox и Chrome работают с изображением так, как если бы оно было текстовым (по некоторым причинам), поэтому его предложениеtable td { font-size:0px; } ИМХО правильный ответ. (Похоже, проблема не связана с IE.)

Справедливо, думаю, я должен был попробовать jsfiddle сам - спасибо @Shadow
Нет,this doesn't solve the issue, (См пространство между рядами)
6

Из быстрой проверки, которую я только что сделал, похоже, проблема в том, что пустое пространство внутри разметки ячеек занимает какое-то место и делает ячейки больше.

Одним из способов решения этой проблемы является установка размера шрифта для ячеек равным 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>
@freefaller только что подтвердил мое предположение. Увидетьthis возиться с хромом. Похоже, что IE игнорирует размер шрифта для изображений, хотя ..
@freefaller Хорошая мысль, это наводит меня на мысль, что браузер «навязывает» размер шрифта над изображениями, а также. Странно, но странные вещи случаются! :)
Я согласен, что ваш ответ работает, и я не могу найти ничего другого, что помогает (я думалwhite-space:nowrap может помочь, это не так ... что я не получаю, так это то, что в вашем jsfiddle естьis нет места между<td>, <img> а также</td> теги ... браузер помещает это туда, несмотря на отсутствие разделения?
-1

Часто это может быть ошибка пользователя. когда вы нарезаете в фотошопе, убедитесь, что все кусочки соприкасаются. если есть разрыв в 1px, то это все испортит !!!

также вот трюк, который я узнал ....

Установите для всех изображений рамку = & quot; 0 & quot; тег после alt = & quot; & quot; ...

if there are any ** ** tags, and i mean only , not

так например ....

попробуйте это и убедитесь, что все изображения имеют рамку = & quot; 0 & quot; и все теги имеют заданную ширину, все срезы соприкасаются, и у вас должно быть 0 пробелов.

Этот ответ требует больше усилий.

Похожие вопросы