css - windows 10 Mail giver ikke maksimal bredde

Indlæg af Hanne Mølgaard Plasc

Problem



Jeg har dette script til min email skabelon:


<tr style="margin: 0;padding: 0;font-family: &quot;Helvetica Neue&quot;, &quot;Helvetica&quot;, Helvetica, Arial, sans-serif;font-size: 100\%;line-height: 1.6">
    <td style="max-width: 110px;text-align: center;padding: 10px;margin: 0;font-family: &quot;Helvetica Neue&quot;, &quot;Helvetica&quot;, Helvetica, Arial, sans-serif;font-size: 100\%;line-height: 1.6">
     <img style="max-width: 110px;margin: 0;padding: 0;font-family: &quot;Helvetica Neue&quot;, &quot;Helvetica&quot;, Helvetica, Arial, sans-serif;font-size: 100\%;line-height: 1.6" src="{{url(asset(isset($email\_logo) ? $email\_logo : 'assets/images/logo-dark.png'))}}" />
                        </td>
                    </tr>


Problemet her er, at Windows 10 Mail App ikke vandt CSS korrekt. Dette er ikke den eneste del af skabelonen, som den ikke giver korrekt.


Skabelonen fungerer fint for Gmail.

Bedste reference


Mail-klienter understøtter ikke mange moderne CSS- eller HTML-funktioner godt eller overhovedet. For at understøtte klienter som Outlook eller Win mail, skal du vende tilbage til den enkleste, ældste mulige HTML (stort set bare tabelelementer med breddeattributter på td-elementer) og kun bruge mere avanceret CSS til gradvist at forbedre meddelelsen til klienter som Gmail og måske lydhørhed til mobile klienter.


Her er en stor ressource af hvad du kan bruge i hvilke klienter:
https://www.campaignmonitor.com/css/box-model/max-width[2]