Как исправить нарезанное изображение в таблице для HTML-почты

Question

Мне было поручено создать письмо в формате HTML, которое использует нарезанное изображение в заголовке.Я никогда не работал с электронными письмами в формате HTML, и я потратил 4 часа на то же самое, пытаясь исправить интервал.

Вот код: http://jsfiddle.net/8EHED/

Хотя междуНа приведенном выше сайте это нормально для обычных браузеров, таких как IE, Firefox и Chrome.

Проблема, из-за которой я схожу с ума, заключается в том, чтобы сделать этот вид правильным в сообщениях электронной почты HTML.Вот как это выглядит, когда я импортирую код в новое сообщение Thunderbird:

Посмотрите, как интервал не такой, каким он должен быть?Я не хочу тратить больше времени, пытаясь решить эту проблему!Что я пропускаю или делаю неправильно?

Answer 1

Добавьте стиль = "display: block" к вашему изображению

Answer 2

Попробуйте удалить пробел

    <table cellspacing=0 cellpadding=0 border=0><tr><td><table id="Table_01" width="650" border="0" cellpadding="0" cellspacing="0">
        <tr>
            <td valign=top align=left width=302 height=51>
                <a href="http://www.example.com">
                    <img src="http://i.imgur.com/1o8lX.jpg" width="302" height="51" border="0" alt="1"></a></td>
            <td valign=top align=left colspan="3" width=241>
                <img src="http://i.imgur.com/twdmt.jpg" width="241" height="51" alt="2"></td>
            <td valign=top align=left width=43>
                <a href="http://twitter.com/">
                    <img src="http://i.imgur.com/S9yfV.jpg" width="43" height="51" border="0" alt="3"></a></td>
            <td valign=top align=left width=64>
                <a href="http://www.facebook.com/">
                    <img src="http://i.imgur.com/z036s.jpg" width="64" height="51" border="0" alt="4"></a></td>
        </tr>
    </table>
    </td></tr>
    <tr><td>
    <table id="Table_01" width="650" border="0" cellpadding="0" cellspacing="0">
<tr>
            <td valign=top align=left width=302 height=238>
                <a href="http://www.example.com/">
                    <img src="http://i.imgur.com/E2PmC.jpg" width="302" height="238" border="0" alt="5"></a></td>
            <td valign=top align=left width=97>
                <a href="http://www.example.com/collection/photos/">
                    <img src="http://i.imgur.com/jLf5N.jpg" width="97" height="238" border="0" alt="6"></a></td>
            <td valign=top align=left width=78>
                <a href="http://www.example.com/events/">
                    <img src="http://i.imgur.com/3875u.jpg" width="78" height="238" border="0" alt="7"></a></td>
            <td valign=top align=left colspan="3" width=173>
                <a href="http://www.example.com/bottle-service/">
                    <img src="http://i.imgur.com/gctHJ.jpg" width="173" height="238" border="0" alt="8"></a></td>
        </tr>
    </table>
    </td></tr></table>

Answer 3

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

Ссылка здесь для дальнейшего решения:

html ширина ячейки таблицы для разных строк

или исправьте код:

    <table id="Table_01" width="650" height="290" border="0" cellpadding="0" cellspacing="0">
        <tr>
            <td valign=top align=left width=302>
                <a href="http://www.example.com">
                    <img src="http://i.imgur.com/1o8lX.jpg" width="302" height="51" border="0" alt="1"></a></td>
            <td valign=top align=left colspan="3" width=241>
                <img src="http://i.imgur.com/twdmt.jpg" width="241" height="51" alt="2"></td>
            <td valign=top align=left width=43>
                <a href="http://twitter.com/">
                    <img src="http://i.imgur.com/S9yfV.jpg" width="43" height="51" border="0" alt="3"></a></td>
            <td valign=top align=left width=64>
                <a href="http://www.facebook.com/">
                    <img src="http://i.imgur.com/z036s.jpg" width="64" height="51" border="0" alt="4"></a></td>
        </tr>
    </table>

    <table id="Table_02" width="650" height="290" border="0" cellpadding="0" cellspacing="0">
        <tr>
            <td valign=top align=left width=302>
                <a href="http://www.example.com/">
                    <img src="http://i.imgur.com/E2PmC.jpg" width="302" height="238" border="0" alt="5"></a></td>
            <td valign=top align=left width=97>
                <a href="http://www.example.com/collection/photos/">
                    <img src="http://i.imgur.com/jLf5N.jpg" width="97" height="238" border="0" alt="6"></a></td>
            <td valign=top align=left width=78>
                <a href="http://www.example.com/events/">
                    <img src="http://i.imgur.com/3875u.jpg" width="78" height="238" border="0" alt="7"></a></td>
            <td valign=top align=left colspan="3" width=173>
                <a href="http://www.example.com/bottle-service/">
                    <img src="http://i.imgur.com/gctHJ.jpg" width="173" height="238" border="0" alt="8"></a></td>
        </tr>
    </table>