HTML Позиционирование отлично в живую, не хорошо в электронной почте - PullRequest
Новая
       17

HTML Позиционирование отлично в живую, не хорошо в электронной почте

0 голосов
/ 27 апреля 2018

Я пытаюсь расположить некоторые изображения с помощью этого кода. Когда они выполняются в блокноте, все работает нормально, оба изображения выровнены и расположены правильно.

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

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

Это код. 

.parent{
    position: relative;
    width: 600px;
    height: 793px;
        }

.background{
    position: absolute;
    width: 100%;
    height: 100%;
    background: blue;
        }

.foreground{
    position: absolute;
    bottom: 100px;
    right: 90px;
    width: 420px;
    height: 595px;
    background: red;
        }
        }
</style>


<table border="0" cellpadding="0" cellspacing="0" style="height:793px;width:600px;">
        <tbody>
            <tr>
                <td>
                    <div class="parent"><img class="background" /> <img class="foreground" /></div>
                </td>
            </tr>
        </tbody>
</table>

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

Может кто-нибудь помочь увидеть проблему?

1 Ответ

0 голосов
/ 27 апреля 2018

Ваша электронная почта отлично выглядит в вашем веб-браузере, потому что каждый веб-браузер работает с position: absolute. Никакие популярные почтовые клиенты не работают с этим свойством css.

Направление, с которым вы работаете с изображениями, - неправильный путь. У меня такое ощущение, что вы пытаетесь работать с фоновыми изображениями. Они не будут работать в Outlook с использованием CSS и вообще не будут работать с IBM Notes или определенными версиями Android.

Лучшие практики

Поскольку вы новичок в разработке электронной почты, я хотел бы предложить несколько ресурсов. Campaign Monitor имеет веб-страницу свойств css и того, как они работают с популярными почтовыми клиентами. Я предлагаю вам изучить его, когда вы узнаете, как разрабатывать HTML-письма. Хотя мы используем много одинаковых инструментов, разработка электронной почты не является веб-разработкой. Есть такие классные ошибки, которые могут помешать развитию.

Удачи.

...