Странное форматирование таблиц в Outlook 2010

Question

Я искал и искал и не смог найти ответ.

У меня странная проблема, показанная только в Outlook 2010.

Как вы можете видеть на изображении, у меня есть одна большая ячейка таблицы (позади изображения), а с другой стороны, справа (не на рисунке) таблица с 9 ячейками, та же структура, что и в моем вопросе можно найти Здесь

Теперь я не понимаю, почему Outlook 2010 не отображает мой код должным образом, и почему у меня есть эти черные линии (возможно, интервалы?) По обеим сторонам изображения.

Вот мой текущий код, возможно, я что-то упустил ... :(

<td rowspan="9"><img alt="Image" src="http://imagelink.com" width="177" height="177" style="margin:15px 0 10px 20px;border-style:solid;border-color:#fff;border-width:7px;-webkit-box-shadow:0 3px 7px 1px #cecece;-moz-box-shadow:0 3px 7px 1px #cecece;box-shadow:0 3px 7px 1px #cecece"></td>

Answer 1

Во-первых, здесь недостаточно информации для дублирования проблемы. Я скопировал ваш точный сценарий по ссылке, приведенной выше.

<table>
<tr>
    <td rowspan="9"><img alt="Image" src="http://imagelink.com" width="177" height="177" style="margin:15px 0 10px 20px;border-style:solid;border-color:#fff;border-width:7px;-webkit-box-shadow:0 3px 7px 1px #cecece;-moz-box-shadow:0 3px 7px 1px #cecece;box-shadow:0 3px 7px 1px #cecece">
    </td>
    <td>
        Cell 1
    </td>
</tr>
<tr>
    <td>
        Cell 2
    </td>
</tr>
<tr>
    <td>
        Cell 3
    </td>
</tr>
<tr>
    <td>
        Cell 4
    </td>
</tr>
<tr>
    <td>
        Cell 5
    </td>
</tr>
<tr>
    <td>
        Cell 6
    </td>
</tr>
<tr>
    <td>
        Cell 7
    </td>
</tr>
<tr>
    <td>
        Cell 8
    </td>
</tr>
<tr>
    <td>
        Cell 9
    </td>
</tr>
</table>​

Протестировано в Outlook 2010 на Windows 7. Никаких проблем. Пожалуйста, включите точную разметку. Заголовки и основной текст могут влиять на электронную почту.

Во-вторых, на какой машине вы работаете, Outlook в XP выглядит иначе, чем 7.

В-третьих, вы не должны использовать сокращенный CSS для электронных писем. Смотри: http://sixrevisions.com/web_design/creating-html-emails/

В-четвертых, отступы и поля работают только с таблицами и тегами td, если они должны быть совместимы с почтовым клиентом: http://www.campaignmonitor.com/css/. Однако поля не поддерживаются в Hotmail. Без вложения изображения в другую таблицу по ссылке у вас возникнут проблемы с заполнением / полями с внутренним содержимым в первой строке.

Пятое, вам нужно закрыть все ваши теги. Изображение не закрывается. / .1025*

Я догадываюсь, что вам, возможно, придется использовать здесь вложенные таблицы, так как это может быть проблема отображения клиента электронной почты. Здесь есть раздел об этом: у Campaignmonitor есть отличный раздел с рекомендациями по дизайну

Попробуйте это:

<table>
<tr>
    <td>
        <table>
            <tr>                   
                <td style="padding-top: 15px; padding-right:0px; padding-bottom: 10px; padding-left:20px;" width="177px" height="177px">
                    <img alt="Image" src="http://imagelink.com" width="177px" height="177px" style="border-style:solid; border-color:#ffffff; border-width:7px; -webkit-box-shadow:0 3px 7px 1px #cecece; -moz-box-shadow:0 3px 7px 1px #cecece; box-shadow:0 3px 7px 1px #cecece" />
                </td>
            </tr>
        </table>
    </td>            
    <td>
        <table>
            <tr>
                <td>
                    Cell 1
                </td>
            </tr>
            <tr>
                <td>
                    Cell 2
                </td>
            </tr>
            <tr>
                <td>
                    Cell 3
                </td>
            </tr>
            <tr>
                <td>
                    Cell 4
                </td>
            </tr>
            <tr>
                <td>
                    Cell 5
                </td>
            </tr>
            <tr>
                <td>
                    Cell 6
                </td>
            </tr>
            <tr>
                <td>
                    Cell 7
                </td>
            </tr>
            <tr>
                <td>
                    Cell 8
                </td>
            </tr>
            <tr>
                <td>
                    Cell 9
                </td>
            </tr>
        </table>
    </td>
</tr>
</table>​

Надеюсь, это поможет!