VS Code и мой браузер правильно отображают эту подпись электронной почты, но ни одно из протестированных мной приложенийCSS

Разбираемся в CSS
Ответить Пред. темаСлед. тема
Гость
 VS Code и мой браузер правильно отображают эту подпись электронной почты, но ни одно из протестированных мной приложений

Сообщение Гость »


В основном заголовок. Я использую eM Client, мой клиент использует Outlook, и я также протестировал его в сети iCloud. Ни один из них не отображает подпись правильно, но VS Code и все мои браузеры это делают. Непонятно, почему и что делать в этот момент. Обратите внимание, что я дизайнер, поэтому я использовал автоматическую компоновку в Figma и использовал этот код, чтобы добраться до этого файла. Файл выглядит следующим образом (помните, что я в этом новичок, поэтому может быть неаккуратно):

Вычисляемая подпись электронной почты @import url("https://fonts.googleapis.com/css?family ... 700,курсив"); @import url("https://cdnjs.cloudflare.com/ajax/libs/ ... et.min.css"); html, тело { поле: 0 пикселей; высота: 100%; } кнопка: фокус-видимый { контур: 2 пикселя, сплошной #4a90e2 !important; контур: -webkit-focus-ring-color auto 5px !important; } а { текстовое оформление: нет; } .email-подпись { дисплей: гибкий; flex-wrap: обертка; выровнять-элементы: гибкий старт; разрыв: 15 пикселей; отступ: 15 пикселей; положение: относительное; цвет фона: #ffffff; ширина: 100%; минимальная ширина: 758 пикселей; минимальная высота: 162 пикселей; } .email-подпись .info { дисплей: встроенный гибкий; гибкое направление: столбец; высота: 131 пикселей; выровнять-элементы: гибкий старт; оправдание-содержание: пространство между; положение: относительное; гибкий: 0 0 авто; } .email-подпись .имя-и-логотип { дисплей: встроенный гибкий; гибкое направление: столбец; выровнять-элементы: гибкий старт; разрыв: 10 пикселей; положение: относительное; гибкий: 0 0 авто; } .email-подпись .div { дисплей: встроенный гибкий; гибкое направление: столбец; выровнять-элементы: гибкий старт; разрыв: 5 пикселей; положение: относительное; гибкий: 0 0 авто; } .email-signature .j-d-van-der-walt { положение: относительное; ширина: подходящее содержимое; поле сверху: -1,13 пикселей; фон: линейный градиент (180 градусов, RGB (43, 145, 209) 0%, RGB (41, 196, 169) 100%); -webkit-background-clip: текст! важно; фоновый клип: текст; -webkit-text-fill-color: прозрачный; семейство шрифтов: Rubik, Helvetica; вес шрифта: 700; цвет: прозрачный; размер шрифта: 24 пикселей; межбуквенный интервал: 0; высота строки: нормальная; пробел: nowrap; } .email-подпись .operations-директор { положение: относительное; ширина: подходящее содержимое; семейство шрифтов: «Рубик», Helvetica; вес шрифта: 300; стиль шрифта: курсив; цвет: var(--синий); размер шрифта: 13 пикселей; межбуквенный интервал: 0; высота строки: нормальная; пробел: nowrap; } .email-подпись .links { дисплей: встроенный гибкий; выровнять-элементы: гибкий старт; разрыв: 10 пикселей; положение: относительное; гибкий: 0 0 авто; } .email-подпись .div-2 { дисплей: встроенный гибкий; выровнять-элементы: по центру; разрыв: 5 пикселей; положение: относительное; гибкий: 0 0 авто; } .email-подпись .flexcontainer { дисплей: встроенный гибкий; гибкое направление: столбец; выровнять-элементы: гибкий старт; разрыв: 2 пикселя; } .email-подпись .text { положение: относительное; выровнять-самостоятельно: растянуть; поле внизу: 0 пикселей; семейство шрифтов: «Рубик», Helvetica; вес шрифта: 300; цвет: var(--синий); размер шрифта: 8 пикселей; межбуквенный интервал: 0; высота строки: нормальная; } .email-подпись .text-wrapper { семейство шрифтов: «Рубик», Helvetica; вес шрифта: 300; цвет: #003366; размер шрифта: 8 пикселей; межбуквенный интервал: 0; } .email-подпись .div-3 { дисплей: встроенный гибкий; выровнять-элементы: по центру; разрыв: 5 пикселей; положение: относительное; гибкий: 0 0 авто; } .email-подпись .text-wrapper-2 { положение: относительное; ширина: подходящее содержимое; семейство шрифтов: «Рубик», Helvetica; вес шрифта: 300; цвет: var(--синий); размер шрифта: 8 пикселей; межбуквенный интервал: 0; высота строки: нормальная; пробел: nowrap; } :корень { --белый: rgba(255, 255, 255, 1); --blue: rgba(0, 51, 102, 1); --teal: rgba(0, 128, 128, 1); --оранжевый: rgba(184, 115, 51, 1); --серый: rgba(211, 211, 211, 1); }
Изображение
Дж.Д. Ван дер Уолт Директор по эксплуатации
Изображение

Изображение
PTA: [url=tel:0123429160]012 342 9160


CPT: 021 207 3977

Изображение

Преториус-стрит, 1028,


Хэтфилд, Претория, 0002
[/url]
Изображение
[email protected]
Изображение
www.compucable.co.za
Я начал с SVG, но, видимо, Oulook его не поддерживает (??), а затем решил закодировать изображения с помощью base64. Не знаю, что делать дальше.

сломанная подпись

Я видел кое-что об использовании таблиц для подписей электронной почты. Честно говоря, не знаю, как это сделать, стоит ли начинать с нуля? Можете ли вы добавлять изображения в таблицы?
Реклама
Ответить Пред. темаСлед. тема

Быстрый ответ

Изменение регистра текста: 
Смайлики
:) :( :oops: :roll: :wink: :muza: :clever: :sorry: :angel: :read: *x)
Ещё смайлики…
   
К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми.

Максимально разрешённый размер вложения: 15 МБ.

  • Похожие темы
    Ответы
    Просмотры
    Последнее сообщение

Вернуться в «CSS»