Изменение изображения в электронной почте приводит к нарушению выравнивания текста в Outlook 2007, 2010, 2013.

У меня проблема с электронной почтой, которую я создал. У меня есть электронное письмо с двумя таблицами одного и того же кода, за исключением изображения, которое я изменил. Когда я изменил это изображение, выравнивание текста по левому краю испортилось в Outlook 2007, 2010 и 2013.

Вот как это выглядит в письме: введите здесь описание изображения

Это код: http://codeshare.io/195q4

Я все перепробовал и мне нужна ваша помощь!


html css email outlook html-email
person Marina    schedule 10.09.2015    source источник
comment
Как испортился текст? Когда вы изменили изображение, вы ограничили размер в HTML или отформатировали изображение до того же размера?   -  person JoePhillips    schedule 10.09.2015
comment
Я использовал ту же ширину на изображении, но изменил высоту.   -  person Marina    schedule 11.09.2015

Ответы (1)


arrow_upward
0
arrow_downward

Если вы измените align="center" в TD внутри каждой таблицы размером 180 пикселей на align="left", это, похоже, решит проблему. См. пример ниже:

        <table width="180" cellpadding="0" cellspacing="0" border="0" align="left" valign="top" class="devicewidth paddingleft paddingright">
            <tbody>
                <tr>
                    <td align="left" style="vertical-align: top;">
                    <img src="http://image.exct.net/lib/fe6615707163057b7617/m/1/Test6.jpg" style="max-width: 100%; height: auto; display: block; font-size: 1px; padding-bottom: 10px; width: 180px; border-color: #000000; margin: 0px; text-align: center;" title="180-image.png" alt="180-image.png" width="180" height="135" mdid="676e2baf-c23e-4da1-bc8c-44a85036dda7" />
                    <p style="text-align: left; font-size: 24px; font-family: Georgia, Arial, Helvetica; color: #52565c; line-height: 30px; margin: 0px; padding: 0px;">
                    Test 6 
                    </p>
                    <span align="center" style="text-align: left;">
                    <img src="http://image.exct.net/lib/fefc16727d6502/m/1/pixel.gif" height="auto" style="display: block; font-size: 1px; border: none; height: 15px !important;" />
                    </span>
                    <p class="textonly textpaddingbild" style="font-size: 14px; font-family: Arial, Helvetica, Georgia; color: #52565c; line-height: 20px; margin: 0px; padding: 0px; text-align: left !important;">
                    Nam ut consequat urna. Duis vitae ante aliquet, luctus nulla id, convallis purus. Suspendisse non euismod tortor.
                    </p>
                    </td>
                </tr>
            </tbody>
        </table>
person Gortonington    schedule 10.09.2015
comment
Да, это так, но это также заставляет мои изображения выравниваться по левому краю в мобильном представлении, когда я хочу, чтобы они выравнивались по правому краю. Я не понимаю, как это может работать с одной из таблиц, но не с другой! - person Marina; 11.09.2015
comment
есть несколько ошибок проверки, с которыми я сталкиваюсь, особенно внутри ваших условий MSO (вы объявляете 2 tds в строках с 3 столбцами). В вашем CSS также отсутствует огромный блок, включая стили без объявленного класса, элемента или идентификатора, на что они должны влиять. Это могут быть основные проблемы, вызывающие странное поведение. - person Gortonington; 11.09.2015